Every example below has a live CSS preview and one-click copy. From basic frosted white to dark glass, color tints, UI components and advanced layered effects — all ready to paste into your project.
Adjust blur, opacity, saturation, border and radius with live sliders — copy CSS, HTML or Tailwind in one click.
Glassmorphism uses backdrop-filter: blur() combined with a semi-transparent background to create a frosted glass effect. The result simulates real glass — the blurred content behind the element bleeds through, creating depth without blocking information.
Every glassmorphism example on this page is built from the same four CSS declarations, with different values per effect:
backdrop-filter: blur(10px) saturate(100%) — the blur intensity. Higher values = more frosted.
background: rgba(255, 255, 255, 0.10) — the glass tint. The alpha value controls transparency.
border: 1px solid rgba(255, 255, 255, 0.18) — the glass edge highlight.
box-shadow: 0 8px 32px rgba(0,0,0,0.20) — depth and elevation.
Important: always include -webkit-backdrop-filter alongside backdrop-filter for Safari and iOS support.
Foundational glass effects — varying blur strength, opacity, and corner radius.
Add personality by tinting the glass with your brand color.
Glassmorphism applied to specific interface elements — buttons, inputs, navbars, modals.
Dark-tinted glass for moody, cinematic, and night-mode interfaces.
Gradient borders, animated glows, layered depth effects and Tailwind equivalents.
Always include both the standard and -webkit- prefixed declarations. All examples on this page do this automatically.
| Browser | backdrop-filter | -webkit-backdrop-filter | Min version |
|---|---|---|---|
| Chrome | ✓ Full | ✓ | 76+ |
| Firefox | ✓ Full | Not needed | 103+ |
| Safari / iOS | -webkit- only | ✓ Required | 9+ |
| Edge (Chromium) | ✓ Full | ✓ | 79+ |
| Opera | ✓ Full | ✓ | 63+ |
backdrop-filter: blur() combined with a semi-transparent background to simulate frosted glass. It requires colourful content behind the element to be visible — a plain white or black background makes the effect invisible.backdrop-blur-md (blur 12px), backdrop-blur-xl (blur 24px), and bg-white/10 (10% white opacity). For precise values, use arbitrary syntax: backdrop-blur-[12px]. The Safari webkit prefix is handled automatically by Tailwind's PostCSS autoprefixer.