Glassmorphism in CSS: How to Create a Frosted Glass Effect

Glassmorphism is a web design trend that imitates semi-transparent frosted glass. Elements look like panels made of frosted glass: a blurred background behind them, slight transparency, and thin borders. The effect adds depth and a modern aesthetic, popular in the interfaces of Apple, Windows 11, and many SaaS applications.

For a quick setup, use the Glassmorphism Generator on reChecker.

What is glassmorphism

Key visual characteristics:

• Semi-transparent background — background with low opacity (rgba, hsla)
• Background blur — backdrop-filter: blur() creates a frosted glass effect
• Thin light border — border with semi-transparent white to create the “glass edge”
• Soft shadow — optional, to separate the element from the background

Without backdrop-filter, a semi-transparent background simply shows blurred content beneath it—the blur creates the characteristic “glass” look.

backdrop-filter: how it works

backdrop-filter applies filters (blur, brightness, contrast, etc.) to the area behind an element, not to the element itself. The element must be semi-transparent for the blur to be visible.

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Available backdrop-filter functions (similar to filter):

• blur(radius) — blur
• brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), opacity()
• drop-shadow() — shadow along the outline (not the rectangle)

For glassmorphism, blur() is most commonly used, sometimes combined with saturate() to intensify the color.

Basic examples

Light glass on a light background

.glass-light {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

Dark glass (for dark mode)

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

Colored tint

.glass-tinted {
  background: rgba(99, 102, 241, 0.15);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

Glass navigation

A sidebar or top bar with glassmorphism creates a sense of a “floating” interface. The page background (a gradient or image) shows through the panel while keeping the content readable. Avoid overloading the panel—one layer of glass is usually enough.

Modals and cards

Glassmorphism is popular for modal windows, tooltips, and popup cards. The effect separates an element from the background without completely obscuring the content beneath it. A semi-transparent overlay is often added beneath the glass panel for modals.

Settings for different use cases

For navigation and panels, blur(10–14px) and background with rgba(255,255,255,0.15–0.3) are usually enough. For cards and modals, you can increase the blur to 16–20px and slightly raise the background opacity for better readability. Dark mode requires rgba(0,0,0,0.2–0.3) and a softer border. Experiment with the Glassmorphism Generator on reChecker to find the right balance.

Browser support

backdrop-filter is supported in Chrome 76+, Safari 9+ (with the -webkit- prefix), Firefox 103+, and Edge 79+. In older versions of Firefox (before 103), the property did not work. The -webkit-backdrop-filter prefix is required for Safari.

Check for support:

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
  }
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .glass {
    background: rgba(255, 255, 255, 0.9); /* непрозрачный fallback */
  }
}

Fallback solutions

When backdrop-filter is unavailable:

1. Opaque background — background: rgba(255, 255, 255, 0.95) — content remains readable, but the glass effect is lost
2. Blurred background image — duplicate the background as a pseudo-element with filter: blur(); more complex to implement
3. SVG filter — for advanced use cases; rarely justified

For most projects, an opaque fallback is sufficient—the functionality is preserved, while the appearance is simplified.

Accessibility

• Contrast — a semi-transparent background reduces text contrast. Make sure the contrast ratio meets WCAG requirements (at least 4.5:1 for regular text)
• Blur and performance — on low-powered devices, backdrop-filter can cause lag; offer an option to turn off the effect via prefers-reduced-motion or settings
• Focus — interactive elements inside the glass should have a visible focus ring

@media (prefers-reduced-motion: reduce) {
  .glass {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
}

Design principles

1. The background should be contrasting — glassmorphism works best against a background with a gradient, image, or varied content. The effect is almost imperceptible on a solid gray background.
2. Moderate blur — 8–16px is usually enough. Excessive blur looks unnatural.
3. A border is essential — a thin light border creates a “glass edge” and improves readability.
4. Avoid overloading the interface — too many glass layers on top of one another reduce readability. Use the effect selectively for cards, sidebars, and modal windows.

Glassmorphism tool on reChecker

The Glassmorphism Generator on reChecker lets you:

• Adjust transparency, blur, background color, and border
• Preview the result in real time against different backgrounds
• Copy CSS with one click
• Get a fallback for browsers without support

Useful for rapid prototyping and choosing settings to suit your design.

Combining it with other effects

Glassmorphism works well with border-radius for rounded panels, with box-shadow for depth, and with clip-path for unusual shapes. Do not combine it with neumorphism—the styles conflict visually. Choose one dominant style for the interface.

Performance

backdrop-filter creates a separate compositing layer. It works well on most devices. Potential issues include:

• Many elements with backdrop-filter on one page
• Animating elements with blur
• Low-powered mobile devices

Recommendation: limit the number of glass elements and test on the target devices.

Alternatives to glassmorphism

If backdrop-filter is unavailable or you want a different look, consider a semi-transparent background without blur, gradient overlays, neumorphism (for minimalist interfaces), or classic cards with a shadow and opaque background. The choice depends on the project's style and accessibility. Remember that glassmorphism is a trend, not a requirement: use it where it enhances the interface, not just to follow fashion. The effect is almost imperceptible on a solid white or gray background—use a contrasting background (a gradient, photo, or varied content) for maximum visual impact.

Recommendations

1. Always add -webkit-backdrop-filter for Safari
2. Check the contrast of text on glass
3. Use a fallback for older browsers
4. Do not overuse it—glassmorphism should enhance the interface, not overload it. One or two glass layers per screen are usually enough to create the desired atmosphere. To quickly check settings and export CSS, use the Glassmorphism Generator on reChecker—it supports light and dark themes and provides ready-to-use code with a fallback.

FAQ

What is glassmorphism?

Glassmorphism is a design style that imitates semi-transparent frosted glass. It is achieved by combining a semi-transparent background, backdrop-filter: blur(), and a thin light border. It is popular in modern UIs (macOS, Windows 11, and mobile apps).

Why is backdrop-filter not working?

Check whether: 1) the -webkit-backdrop-filter prefix has been added for Safari; 2) the element has a semi-transparent background (otherwise the blur is not visible); 3) the browser supports the property (Firefox before 103 does not). Also, backdrop-filter does not work on an element with isolation: isolate in some contexts.

How do I create a fallback for browsers without backdrop-filter?

Use @supports. If support is unavailable, set an opaque or semi-transparent background without blur: background: rgba(255, 255, 255, 0.95). The content remains readable, but the glass effect is lost.

Does glassmorphism affect accessibility?

Yes. A semi-transparent background reduces text contrast. Check the contrast ratio against WCAG requirements. On low-powered devices, blur can affect performance—consider turning it off when prefers-reduced-motion: reduce.

Which tool should I use to create glassmorphism?

The Glassmorphism Generator on reChecker is a free online tool for configuring the glass effect. It lets you change transparency, blur, color, and border with a live preview. It exports ready-to-use CSS with a fallback. Suitable for designers and developers.