Frost: matte frosted glass, light and calm

About the material

Frost hides detail on purpose. With 40 px of blur, a pale blue-white tint (#eef3fa) at 55% opacity and a touch of extra brightness, the backdrop survives only as colour and light. Refraction is low, the white rim is crisp at 80%, and the shadow is one of the lightest in the group, so panels feel airy rather than heavy. It is matte frost, not wet glass: calm, cool and even from edge to edge.

That haze makes Frost a natural fit for busy or photographic backdrops behind controls people scan quickly: sidebars and toolbars on workspace screens, search fields, tabs, popovers and menus. It works on light and dark themes alike, and the workspace screen template makes a good test bench. As with every material, keep long text off the glass and never nest one glass surface inside another.

Most of Frost's character comes from blur and tint, which is exactly what CSS backdrop-filter does well, so the CSS-only export loses little more than the subtle edge refraction of full quality. Where backdrop-filter is unsupported, or the user prefers reduced transparency, the surface turns solid. Copy the CSS or Tailwind, take the SwiftUI wrapper, or hand the JSON config to an agent.

Best for

• Sidebars and toolbars on workspace screens
• Search and menus over photos or busy art
• Frosted glass in plain CSS
• Calm, cool UI in light and dark themes

Parameters

Where to use it

Best on: light backgrounds, dark backgrounds.
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: 'frost'
});

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