Frosted Glass

The frosted-glass effect combines a semi-transparent background with backdrop-filter: blur() to create a translucent surface that reveals the content behind it. Diwa provides tokenised blur levels and a semantic background token so the effect adapts correctly across themes.

Example

4px

8px

16px

24px

Token	Value	Use
--diwa-bg-frosted	hsl(240 3% 18%/35%)	Semi-transparent background — theme-aware
--diwa-blur-sm	4px	Tooltips, small dropdowns
--diwa-blur-md	8px	Standard frosted panels, navigation bars
--diwa-blur-lg	16px	Modals, flyouts, sheets
--diwa-blur-xl	24px	Full-screen overlays, frosted backgrounds

Usage

✓Apply frosted glass to a container to create an immersive moment.
✓Use the effect as an overlay on contrast-rich, colourful backgrounds.
✓Use it for hover state overlays and interactive surface elevations.
✓Pair only with neutral colours for the panel background.
✓Use sparingly — reserve for key moments, not as a default surface style.

Don't

✕Don't apply the effect over low-contrast or near-white backgrounds — the blur becomes invisible.
✕Don't use on elements with critical text when the underlying content could reduce readability.
✕Don't combine with coloured backgrounds — always use the neutral --diwa-bg-frosted token.
✕Don't use as a default card style; reserve it for immersive or overlay contexts.

ℹ

Contrast: Be aware of contrast issues depending on the background — always verify text legibility against the blurred surface.

Browser support: Always include -webkit-backdrop-filter for Safari. If the property is unavailable, --diwa-bg-frosted still provides visual separation via its semi-transparent background.

Styles

Use the CSS tokens directly, or import the pre-composed JS style object from @diwacopilot/components/styles:

/* CSS */
.nav-bar {
  background: var(--diwa-bg-frosted);
  backdrop-filter: blur(var(--diwa-blur-md));
  -webkit-backdrop-filter: blur(var(--diwa-blur-md));
  border-bottom: 1px solid var(--diwa-border);
}

/* JS — JSS / styled-components / inline styles */
import { frostedGlassStyle } from '@diwacopilot/components/styles';

// Returns:
// {
//   background: 'var(--diwa-bg-frosted)',
//   backdropFilter: 'blur(var(--diwa-blur-md))',
//   WebkitBackdropFilter: 'blur(var(--diwa-blur-md))',
// }

<div style={frostedGlassStyle}>Frosted Glass</div>

@use '@diwacopilot/components/styles' as *;

.nav-bar {
  background: $diwa-bg-frosted;
  backdrop-filter: blur($diwa-blur-md);
  -webkit-backdrop-filter: blur($diwa-blur-md);
  border-bottom: 1px solid $diwa-border;
}

.overlay-panel {
  background: $diwa-bg-frosted;
  backdrop-filter: blur($diwa-blur-lg);
  border-radius: $diwa-border-radius-lg;
}