color

backdrop-filter: frosted glass and blur effects

Apply filters to what's behind an element, not the element itself. The foundation of glassmorphism and modern overlay design.

filter vs backdrop-filter

The filter property applies effects to an element and its contents. backdrop-filter applies effects to the area behind the element — everything visible through the element's background. The element itself must have a semi-transparent or transparent background for the effect to be visible.

/* filter: blurs the element itself */
.blurred-image { filter: blur(10px); }

/* backdrop-filter: blurs what's behind the element */
.glass-panel {
  background: oklch(0.98 0 0 / 0.3);
  backdrop-filter: blur(16px);
}

Available filter functions

All standard filter functions work with backdrop-filter. You can chain multiple functions for layered effects:

.panel {
  background: oklch(0.2 0.02 260 / 0.4);
  backdrop-filter:
    blur(12px)
    brightness(1.1)
    saturate(1.5);
}

/* Individual functions */
.blur-only    { backdrop-filter: blur(20px); }
.bright       { backdrop-filter: brightness(1.5); }
.contrast     { backdrop-filter: contrast(0.8); }
.saturated    { backdrop-filter: saturate(2); }
.inverted     { backdrop-filter: invert(1); }
.grayscale-bg { backdrop-filter: grayscale(1); }

Chain blur with brightness or saturate for richer results. Blur alone can look washed out — a slight brightness boost compensates.

Glassmorphism recipe

The glassmorphism aesthetic combines a translucent background, backdrop blur, a subtle border, and a soft shadow. Here's a production-ready recipe using oklch:

.glass-card {
  background: oklch(0.98 0 0 / 0.15);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: 1rem;
  box-shadow:
    0 8px 32px oklch(0 0 0 / 0.1),
    inset 0 1px 0 oklch(1 0 0 / 0.15);
  padding: 2rem;
}

/* Dark variant */
.glass-card--dark {
  background: oklch(0.15 0.02 260 / 0.5);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid oklch(1 0 0 / 0.08);
}

Frosted glass header

A sticky navigation bar with backdrop blur lets content scroll behind it while remaining readable. This is the pattern used by most modern web apps:

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(0.98 0 0 / 0.7);
  backdrop-filter: blur(12px) saturate(1.5);
  border-block-end: 1px solid oklch(0.5 0 0 / 0.1);
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: oklch(0.15 0.02 260 / 0.7);
    border-color: oklch(1 0 0 / 0.06);
  }
}

Performance considerations

Backdrop filters are GPU-composited, but they aren't free. Every pixel behind the element must be sampled and processed each frame. Keep these guidelines in mind:

Limit blur radius — values above 30px rarely look better but cost more.
Avoid animating backdrop-filter values directly. Instead, animate opacity on a wrapper.
Large blurred areas on low-end mobile devices can drop frame rates. Consider removing the effect at reduced motion or on small screens.
Use will-change: backdrop-filter sparingly and only when needed.

/* Graceful degradation */
@media (prefers-reduced-motion: reduce) {
  .glass-panel {
    backdrop-filter: none;
    background: oklch(0.2 0.02 260 / 0.9);
  }
}

Dark mode adjustments

Glassmorphism looks different against dark backgrounds. You typically need more opacity in the background color and less brightness boost:

:root {
  --glass-bg: oklch(0.98 0 0 / 0.15);
  --glass-blur: blur(20px) saturate(1.8) brightness(1.1);
  --glass-border: oklch(1 0 0 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: oklch(0.2 0.02 260 / 0.4);
    --glass-blur: blur(20px) saturate(1.4);
    --glass-border: oklch(1 0 0 / 0.08);
  }
}

Test glass effects against both light and dark backgrounds, and against varied content — a blur that looks great over images may be unreadable over text.