CSS Backdrop Filter

backdrop-filter applies effects (e.g., blur, saturate, contrast) to the content behind a semi-transparent element—perfect for “glassmorphism”. It requires a translucent background on the overlay and works best atop colorful/photographic layers.

1) Glass Card (Basic)


.glass{
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); /* Safari */
  border: 1px solid rgba(255,255,255,.55);
}

Frosted Glass Panel

Background behind this card is blurred & saturated.

Quick Stats

• Blur + Contrast variant

Performance: Large, animated blurs can be expensive. Use smaller regions and avoid animating heavy values.

2) Glass Tiles (Card Grid)


.gcard{
  background: rgba(255,255,255,.32);
  backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.5);
}
Card 1
Glass tile with hover lift
Card 2
Glass tile with hover lift
Card 3
Glass tile with hover lift
Card 4
Glass tile with hover lift
Card 5
Glass tile with hover lift
Card 6
Glass tile with hover lift

3) Dark Glass over Imagery


.glass-dark{
  background: rgba(17,25,40,.45);
  backdrop-filter: blur(8px) saturate(1.4);
  color: #e5e7eb;
}

Dark Glass Header

Useful on bright/photographic backdrops.

4) Fallbacks & Feature Detection


@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .glass { background: rgba(255,255,255,.3); }
}
@supports not (backdrop-filter: blur(4px)) {
  .glass { background: #ffffff; }
}

Tip:

  • Use @supports to gracefully degrade.
  • As a JS fallback, add a .no-backdrop class on <body> if support is missing and provide solid backgrounds.

Accessibility & Contrast:

  • Keep text legible: add a subtle light or dark tint layer (.shade) to improve contrast over noisy backgrounds.
  • Avoid important content entirely inside heavy blur areas; consider solid panels for critical text.
  • Prefer static glass for performance; if animating, animate modest blur radii.