</>
DevToolHub
Abstract colorful gradient background with soft blurred tones

Glassmorphism CSS Examples: 6 Effects You Can Copy Right Now

·10 min read
Quick answer: Glassmorphism uses 4 CSS properties: background: rgba() for transparency, backdrop-filter: blur() for the frosted glass effect, border with a semi-transparent white for the edge highlight, and border-radius for rounded corners. That's it. No JavaScript, no libraries, just CSS.

I first saw glassmorphism on Apple's macOS Big Sur login screen in 2020 and thought it was some complex rendering trick. Turns out it's 4 lines of CSS. The entire effect is a semi-transparent background with a blur filter applied to whatever sits behind it. Once you understand the pattern, you can build any variation in under a minute.

Here are the CSS properties involved, 6 copy-paste examples, and the browser support gotchas you need to know before shipping this to production.

The Core CSS Properties

Glassmorphism boils down to a predictable set of properties. Here's what each one does:

PropertyRole in GlassmorphismTypical ValuesBrowser Support
backgroundCreates the transparent tinted layerrgba(255, 255, 255, 0.1) to rgba(255, 255, 255, 0.3)All browsers
backdrop-filterBlurs the content behind the elementblur(10px) to blur(25px)96%+ (no IE, old Firefox)
-webkit-backdrop-filterSafari/iOS prefix for backdrop-filterSame as backdrop-filterSafari, iOS Safari
borderSubtle edge highlight for depth1px solid rgba(255, 255, 255, 0.2)All browsers
border-radiusRounded corners for the card shape12px to 24pxAll browsers
box-shadowSoft shadow for elevation0 8px 32px rgba(0, 0, 0, 0.1)All browsers
The entire effect depends on backdrop-filter. Without it, you get a flat semi-transparent box. With it, you get the frosted glass look. Everything else is styling on top.

The minimum viable glassmorphism:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Five lines. That's the foundation for every example below.

Example 1: Basic Glass Card

The starting point. A simple card with frosted glass effect, suitable for content sections, modals, or pricing cards.

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

The rgba(255, 255, 255, 0.15) background gives a 15% white tint. Lower the alpha for more transparency (more background bleed-through), raise it for a more opaque, frostier look. I find 0.1 to 0.25 is the sweet spot — below 0.1 and the card barely registers as a surface; above 0.3 and you lose the glass effect entirely.

The blur(12px) value controls how aggressively the background is blurred. 8-16px works for most card sizes. Going above 20px looks heavy and can feel sluggish on lower-end devices because backdrop-filter is GPU-intensive.

Example 2: Dark Mode Glass Card

Same concept, but inverted for dark backgrounds. Instead of white transparency, use dark transparency with a lighter border.

.glass-card-dark {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

The border opacity drops to 0.08 because on dark backgrounds, even a subtle white border stands out more. The shadow opacity increases to 0.3 because dark cards need stronger shadows to separate from dark backgrounds.

This works well against dark gradients, image backgrounds, and dark-themed UIs. Apple uses this variant in the macOS Notification Center and Control Center.

Example 3: Colored Glass (Tinted)

Add a color tint to the glass for branded UI elements — navigation bars, feature highlights, or CTAs that need to stand out while keeping the glass aesthetic.

.glass-tinted-blue {
  background: rgba(59, 130, 246, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}

.glass-tinted-purple {
  background: rgba(139, 92, 246, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

The trick is keeping the alpha low on the background (0.1-0.2) so the color tints the glass rather than overpowering it. If the background alpha exceeds 0.3, it stops looking like glass and starts looking like a solid colored box.

Match the border and shadow color to the background tint. This creates a cohesive "glow" effect that makes the tinted glass feel intentional rather than accidental.

Need to find the right RGBA values for your brand color? The color converter handles hex-to-rgba conversion with alpha channel support.

Example 4: Glass Navigation Bar

A top navigation bar with the glass effect. The content scrolls behind it, creating a natural frosted-glass-over-content look that iOS and macOS popularized.

.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
}

Two differences from the card examples. First, the background alpha is higher at 0.7 — navigation needs to be readable, so you want more opacity than a decorative card. Second, saturate(180%) is added to the backdrop-filter. This boosts the color vibrancy of the blurred background, which prevents the nav from looking washed-out as content scrolls underneath.

Apple's Safari toolbar uses blur(20px) saturate(180%) — that's the exact recipe for the "Apple glass nav" look.

For dark themes, switch to rgba(17, 24, 39, 0.75) (a dark gray) and drop the saturation to saturate(120%). Dark glass navs with heavy saturation look noisy.

Example 5: Glass Input Field

Form inputs with glassmorphism. Works well for login forms, search bars, and overlay forms that sit on top of background imagery.

.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
}

The :focus state subtly increases both the border opacity and background opacity. This gives visual feedback that the field is active without breaking the glass aesthetic. Avoid colored focus rings on glass elements — they clash with the transparency. A brighter version of the existing border works better.

Accessibility note: glass inputs on variable backgrounds can fail WCAG contrast requirements. The text color needs at least 4.5:1 contrast against the effective background (the blurred content behind the input). Test with real content behind the form, not just a solid color preview. If contrast is borderline, increase the background alpha to 0.25-0.35.

Example 6: Layered Glass (Nested Cards)

Multiple glass elements stacked on top of each other. Each layer blurs the one below it, creating depth. This is what you see in macOS widget stacks and Windows 11's Mica material.

.glass-layer-1 {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 32px;
}

.glass-layer-2 {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 24px;
}

.glass-layer-3 {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px;
}

Each layer increases background opacity slightly (0.1 → 0.12 → 0.15) and decreases blur (20px → 8px → 4px). The outer layer does the heavy blurring, inner layers add subtle refinement. If every layer uses high blur values, the GPU cost stacks up and you'll see frame drops on mobile.

Performance warning: stacking 3+ glass elements with backdrop-filter is expensive. Each layer triggers a separate GPU compositing pass. On a mid-range Android phone, 3 nested blur layers can drop frame rates from 60fps to 30-40fps during scroll. Limit nesting to 2 layers for production UI, and use 3 only for hero sections that don't scroll.

Browser Support and Fallbacks

backdrop-filter has strong support in 2026, but you still need fallbacks for the edge cases:

Browserbackdrop-filter SupportNotes
Chrome 76+YesFull support since 2019
Safari 9+Yes (with -webkit- prefix)Always include the prefix
Firefox 103+YesAdded in 2022. Older versions need layout.css.backdrop-filter.enabled flag
Edge 79+YesChromium-based, same as Chrome
iOS Safari 9+Yes (with -webkit- prefix)Works on all modern iPhones
Samsung Internet 12+YesCovers ~98% of Samsung devices
Internet ExplorerNoDead browser. Don't worry about it.
Global support is roughly 96% as of early 2026. The 4% without support are mostly old Firefox versions and embedded webviews in certain Android apps.

The fallback pattern:

.glass {
  /* Fallback: solid semi-transparent background */
  background: rgba(255, 255, 255, 0.85);

  /* Glass effect for supporting browsers */
  @supports (backdrop-filter: blur(1px)) {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

The @supports query checks if the browser understands backdrop-filter. If it doesn't, the element gets a higher-opacity background that looks like a solid frosted panel — not as pretty, but fully usable. The effect degrades gracefully instead of breaking.

Performance Tips

Glassmorphism looks great but costs GPU cycles. Here's how to keep it fast:

  • Limit blur radius. 8-16px is enough for most elements. Going above 24px adds GPU cost with diminishing visual returns.
  • Avoid backdrop-filter on scrolling elements. A fixed glass nav is fine — the browser only composites it once. A glass card inside a scrolling list forces recompositing on every frame.
  • Use will-change: backdrop-filter sparingly. It hints to the browser to pre-composite the element, which helps animation but wastes memory if applied to static elements.
  • Don't nest more than 2 blur layers. Each nested backdrop-filter triggers a separate compositing pass.
  • Test on real devices. A glassmorphism card that runs at 60fps on your M-series MacBook might stutter on a $200 Android phone. Chrome DevTools' performance panel can simulate 4x CPU slowdown.
Want to experiment with values without writing CSS by hand? The glassmorphism generator lets you adjust blur, opacity, border, and color with live preview and gives you the CSS output.

FAQ

Does glassmorphism work without a background image or gradient?

Technically yes, but it looks like nothing. The entire point of backdrop-filter: blur() is to blur whatever's behind the element. If the background is a solid white page, blurring white gives you... white. You need a gradient, image, or colorful content behind the glass element for the effect to be visible. Dark gradients (deep blue to purple) and abstract blobs are the most popular backgrounds for glassmorphism UIs.

How do I make glassmorphism accessible?

Two main concerns: contrast and motion. For contrast, test your text against the effective blurred background — not just the glass element in isolation. Use background: rgba() with enough alpha (0.2-0.4) to guarantee readable text regardless of what scrolls behind the element. For motion sensitivity, backdrop-filter doesn't trigger motion issues for most users, but stacked animations on glass elements can. Wrap animated glass effects in a @media (prefers-reduced-motion: no-preference) query.

Can I animate glassmorphism properties?

Yes. backdrop-filter, background, and border are all animatable with CSS transitions. A common pattern is increasing blur on hover: transition: backdrop-filter 0.3s ease with a hover state that bumps blur from 12px to 20px. Keep transitions under 300ms — slow glass transitions look laggy rather than smooth. Avoid animating blur on more than 2-3 elements simultaneously; the GPU cost scales linearly with each animated blur layer.

What's the difference between glassmorphism and neumorphism?

Different design systems entirely. Glassmorphism uses transparency, blur, and light borders to simulate glass. Neumorphism uses same-color backgrounds with inset/outset shadows to simulate extruded or pressed surfaces — think soft plastic buttons. Glassmorphism needs a colorful background to work. Neumorphism needs a flat, single-color background. They don't mix well. Glassmorphism has better accessibility because the transparency provides natural contrast variation; neumorphism struggles with contrast because everything is the same base color.

Next Steps