Glassmorphism in CSS: how backdrop-filter works and when to use it

Glassmorphism is the design trend that simulates frosted glass: translucent cards that blur whatever sits behind them. Behind that visual effect a single CSS property does most of the work, and understanding it well makes the difference between an elegant result and one that wrecks your page's performance.

The recipe: four declarations

A complete glassmorphic element looks like this:

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

Each line serves a specific purpose and none of them is optional:

• Low-alpha background: the tint of the glass. An opacity between 10% and 25% lets the background show through while giving the element presence.
• backdrop-filter: blur(): the heart of the effect. It blurs everything behind the element, not its inner content.
• 1px translucent border: simulates the glass edge catching the light. It is a small detail but it is what keeps the card from melting into the background.
• Soft shadow: separates the element from the background plane and gives it physical depth.

backdrop-filter is not filter

The most common mistake is using filter: blur() instead of backdrop-filter: blur(). They are not interchangeable:

• filter: blur() applies the blur to the element itself and all its content, including any text inside the card. The text becomes unreadable.
• backdrop-filter: blur() blurs only what is behind the element. Inner content stays sharp.

That is exactly the difference between looking through frosted glass and putting the object inside the frosting.

The -webkit- prefix is still required

Safari shipped the property before the name was standardized, which is why it needs the -webkit-backdrop-filter prefix. Every current Safari version requires it; if you only write the standard property, Safari users on iPhone and Mac will see the card with no blur at all, with the background fully sharp behind it.

The correct order is prefix first, standard second:

-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);

That way, once a browser supports both, the last valid declaration wins.

Without a colorful background there is no effect

This is mistake number one when testing glassmorphism: applying it over a plain white background. Frosted glass against a white wall is invisible; you need visual variation behind the element for the blur to be perceived.

Backgrounds that show the effect best are gradients with several saturated colors or photographs. If your design has a flat background, you can create color patches behind cards using absolutely positioned blurred circles:

.background {
  background: #0f172a;
}
.background::before {
  content: "";
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #7c3aed;
  filter: blur(120px);
  opacity: 0.6;
}

That giant blurred circle creates the color blob that backdrop-filter can actually blur.

Performance: the real price

backdrop-filter is one of the most expensive properties in CSS. Every element using it forces the browser to composite twice: first it renders the background, then applies the filter per pixel within the element's region. Three things you should know:

1. Few large elements beat many small ones. Four blurred cards are fine; forty blurred table rows will make scrolling painful even on modern hardware.
2. Never animate it. Animating the blur value recalculates the filter every frame. If you want motion, animate transform on the element itself, never the blur.
3. Mobile multiplies the cost. Always test on a physical mid-range device before signing off on the effect.

If you hit performance problems, reduce the filtered area or replace blur with higher opacity: you lose the frosted feel but keep the translucency at a fraction of the cost.

Accessibility: contrast over visual noise

Text over a blurred-but-visible background can fail WCAG contrast criteria depending on what happens to sit underneath it. Two practical safeguards:

• Keep the glass background opacity above 12-15% so the noise underneath text is sufficiently dampened.
• Check contrast against the worst case: both the lightest and darkest zones of the background passing behind the card.

Generate your configuration visually

Tuning opacity, blur, radius and shadow by hand is trial and error. Our Glassmorphism Generator gives you instant preview over five different backgrounds (aurora, sunset, ocean, forest and mesh) and emits the final CSS with the -webkit- prefix included, ready to paste.

FAQ

Which browsers lack backdrop-filter support? All modern browsers support it (Chrome 76+, Firefox 103+, Safari 9+ with prefix). For very old browsers, define a more opaque background fallback inside @supports.

Can I stack multiple filters? Yes, backdrop-filter accepts lists just like filter: for example blur(12px) saturate(180%), a common combination to intensify background colors after blurring them.

Does it work with elements that have overflow or transform? There are edge cases: an ancestor with filter, transform or will-change can break the effect because it changes the compositing context. If the blur does not appear, check styles on parent containers.

Create your glass card with live preview using the Glassmorphism Generator, free and right in your browser.