Glassmorphism in CSS: The Complete Guide to Frosted Glass Effects

What Is Glassmorphism?

Glassmorphism is a UI design trend that mimics frosted glass. Elements appear translucent with a blurred background, a subtle border, and a soft shadow — creating a layered, depth-rich interface. Apple popularized the look in macOS and iOS, and it has since spread to web applications, dashboards, and landing pages.

The effect works best when placed over colorful or image-heavy backgrounds, because the blur needs underlying content to actually look like glass. On a flat, solid-color background the translucency is invisible and the technique adds complexity for no visual payoff.

Use glassmorphism for hero sections, feature cards, overlays, navigation bars, and modals where you want to create visual hierarchy without completely hiding the content behind the element. Avoid it for dense data tables or text-heavy areas where readability is paramount.

The Core CSS Properties

Every glassmorphism effect is built from four CSS building blocks. Understanding each one lets you fine-tune the look to match any design system.

1. backdrop-filter: blur()

This is the star of the show. backdrop-filter: blur() applies a Gaussian blur to everything behind the element, creating the frosted-glass illusion. Higher values produce a more opaque, milky look; lower values keep the background recognizable.

2. background with rgba()

The element needs a semi-transparent background so the blur shows through. Using rgba() or hsla() lets you control the tint color and opacity independently. A white tint with low opacity gives a light-glass feel; a dark tint works for dark-themed interfaces.

3. border

A thin, semi-transparent border gives the glass element a visible edge that catches light. This subtle highlight is what makes the surface feel physical rather than just blurry.

4. box-shadow

A soft shadow lifts the glass element off the background and reinforces the layered depth illusion. Use a large spread with low opacity to keep things subtle.

Step-by-Step: Building a Glass Card

Let's combine all four properties into a reusable glass card. This is the foundation you can adapt for every glassmorphism component.

Place this card over a vibrant gradient or image background. The HTML structure is minimal:

Design the gradient backdrop first using our Gradient Studio to get the exact colors and angle you want, then layer the glass card on top.

Glass Navigation Bar

A glassmorphism navbar stays visible while letting the page content shine through as the user scrolls. Fix it to the top and use a lower blur value so the navigation feels lightweight.

Keep the background opacity low (0.05 - 0.12) so the navbar feels transparent at rest but still readable. The border-bottom creates a subtle dividing line without making the nav feel heavy.

Glass Modal / Dialog

Glass modals look striking because the background content blurs behind them, naturally drawing focus to the dialog content. Combine a blurred overlay with a glass-styled dialog box.

The two-layer blur is intentional: the overlay applies a light blur (4px) to dim and soften the entire page, while the modal itself applies a stronger blur (20px) for the frosted-glass surface. This stacking creates natural depth separation.

Dark Mode Glassmorphism

On dark backgrounds, swap the white tint for a dark one and adjust border colors accordingly. The blur still works the same way, but the overall feel shifts from airy and light to moody and sophisticated.

The key additions for dark mode are:

• •Higher background opacity (0.5 - 0.8) - Dark glass needs more opacity to feel like a surface. Pure translucency on dark backgrounds can look muddy.
• •saturate() in backdrop-filter - Adding saturate(180%) boosts the vibrancy of the blurred content, preventing it from looking washed out in dark themes.
• •Lower border opacity - On dark UIs, a bright border can be distracting. Drop it to 0.08 - 0.15 for subtlety.
• •Stronger shadow - Increase shadow opacity to 0.4 - 0.6 so the element visually lifts off the dark background.

To support both themes, use CSS custom properties and toggle them with a prefers-color-scheme media query or a class-based theme switcher:

Performance Considerations

backdrop-filter is GPU-accelerated, but it is not free. The browser must composite the blurred background on every frame where the element or its background changes. Here is what to watch for and how to mitigate the cost.

• •Limit the number of blurred elements - One or two glass surfaces per viewport is fine. Stacking five or more overlapping blurred layers will cause jank on mid-range mobile devices.
• •Avoid animating behind glass - Parallax scrolling, video backgrounds, or CSS animations running beneath a blurred element force the browser to re-render the blur every frame. If you must, use will-change: transform on the animated layer.
• •Keep blur radius reasonable - A 64px blur is dramatically more expensive than a 12px blur because the GPU samples a much larger area. Stay between 8px and 20px for a good look-to-cost ratio.
• •Use contain: paint when possible - Adding contain: paint to the glass element hints to the browser that nothing inside it affects layout outside, enabling paint optimizations.
• •Test on real devices - Desktop GPUs handle blur with ease. Always profile on actual phones and tablets, especially older Android devices where the GPU is the bottleneck.

If performance is critical and glass is decorative, consider a fallback: use a semi-transparent background without the blur on devices that struggle. A @supports query can detect backdrop-filter support, and you can combine it with a media query for prefers-reduced-motion to disable the effect for users who prefer reduced visual complexity.

Browser Support

backdrop-filter is now supported in all major modern browsers. Safari was the first to implement it (with the -webkit- prefix) and still requires it.

Always include the -webkit-backdrop-filter prefix alongside the standard property. For the small percentage of users on older browsers, provide a graceful fallback:

The fallback uses a higher opacity background so the element still looks like a solid surface. When backdrop-filter is available, it drops the opacity and lets the blur do the work.

Best Practices

• •Always pair with a colorful background - Glassmorphism only works when there is content behind the glass to blur. A solid-color page gains nothing from the effect.
• •Maintain text contrast - Frosted glass can reduce contrast. Test your text against varying background colors to ensure it remains readable. Add a slightly higher background opacity or a text shadow if needed.
• •Use border-radius generously - Sharp corners on glass elements look unnatural. Round corners (12px - 24px) reinforce the smooth, physical feel.
• •Don't overuse it - One or two glass elements per screen create focus and hierarchy. Glass on every element creates visual noise and kills performance.
• •Layer glass elements carefully - If you stack glass on glass, each layer compounds the blur cost. Keep nesting shallow.

Design Your Glass Background

The magic of glassmorphism comes from what sits behind the glass. Use our Gradient Studio to design the perfect gradient overlay for your glass elements. Choose vibrant colors, adjust angles, and generate the CSS code instantly — then layer your glass card on top.

Combine gradients with glassmorphism for some of the most visually striking UI effects on the modern web. A well-chosen gradient behind a frosted-glass card can elevate a landing page, pricing table, or feature section from ordinary to memorable.