Violet: deep electric purple liquid glass

About the material

Violet uses #8a3dff at about 0.58 opacity. A 34 px blur, the heaviest in the colored group, turns the backdrop into a soft cloud of color, saturation at 195% keeps it rich, and refraction of 34 bends the edges gently. The shadow is noticeably denser than its siblings (0.38), so panels seem to float above the scene. A #d6c2ff rim glows lavender. This is purple glass in CSS with real depth, not a flat glassmorphism fill.

Purple is tied to creativity, magic and tech, which makes Violet a good match for AI features and assistants, music and video apps, games, creative editors and pro tiers. It feels most at home in dark interfaces and over media, where the lavender rim pops against a night backdrop. Avoid long reading surfaces and glass nested in glass. A selected segment gets a bright plate with deep violet text, so the active choice is never ambiguous.

In solid quality and with Reduce Transparency on, Violet stays violet: the tint is mixed into an opaque base, text contrast stays at 7:1 or better, blur drops to 8 px and refraction switches off. Increase Contrast makes the rim 2 px and fully opaque, and Reduce Motion sets transition duration to zero. Tune Violet in the studio on media controls, a menu or a dialog, then export HTML/CSS, Tailwind, SwiftUI or JSON.

Best for

• AI features and assistants
• Music and video players
• Games and night-mode UI
• Creative editors and pro tiers

Parameters

Where to use it

Best on: dark backgrounds, photos and video.
Avoid: long-form content, glass nested in glass.

Code

import { generateCode } from
  '/releases/2.2.0/sdk/core/index.js';

const result = generateCode({
  component: 'button', preset: 'violet'
});

The SDK runs without the DOM: swap in the component you need, the preset stays the same.