Why is my backdrop-filter not working?

MDN: the effect shows only when the element, or its background, is transparent or partly transparent, so a Tint opacity of 1 gives a solid panel with nothing to see through. It also needs something behind the element to blur; a plain color looks the same blurred. Browsers that read neither spelling get the @supports not (...) fallback, which makes the tint 0.1 more opaque (0.5 becomes 0.6).

What are the Tailwind classes for glassmorphism?

For the starting glass: bg-[rgba(255,255,255,0.5)] backdrop-blur-[16px] backdrop-saturate-[180%] border border-[rgba(255,255,255,0.3)] rounded-[16px] shadow-[0_5px_20px_rgba(0,0,0,0.1)]. The Tailwind output gives them as an @apply rule for a .glass class and as a class list to put on the element.

What does Inner Glow do?

It adds a white glow along the inside edge, written into the same box-shadow as inset 0 0 (glow × 4)px rgba(255, 255, 255, 0.35): 2.5 gives inset 0 0 10px, and 0 leaves it out. It does not brighten the whole panel.

Can the glass be a color other than white?

Yes. Color sets the tint and Tint opacity its alpha, from 0 (clear glass) to 1 (solid): the Dark Glass preset writes rgba(31, 41, 55, 0.3). The border is white, 0 to 8 px wide at an opacity of 0 to 1 (1px at 0.3 to start; 2 px at 0.5 writes border: 2px solid rgba(255, 255, 255, 0.5)), and the shadow is black at 0.1.

Does the CSS set a text color?

No. The preview picks black or white text for the glass over the chosen background, an estimate that ignores the colored shapes behind it, but the exported CSS leaves the text color to your page. Check the contrast of your own text over your own background.

CSS Glassmorphism Generator

Set blur, saturation, tint opacity, corner radius, shadow and inner glow for a frosted glass panel and copy the backdrop-filter CSS, SCSS or Tailwind classes. How it works

Presets:

Blur16px

Tint opacity0.5

0 is clear glass, 1 is solid

Saturation180%

Border radius16px

Shadow blur20px

Shadow offset5px

Inner glow0

White glow 0px deep along the inside edge

Border width1px

0 removes the border

Border opacity0.3

Color

Glassmorphism

CSS

/* backdrop-filter support (MDN browser-compat-data): unprefixed in Chrome 76, Edge 79, Firefox 103 and Safari 18.
 * Safari 9 to 17 only understands -webkit-backdrop-filter, so both are written. */
.glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Browsers that understand neither spelling get a more opaque tint so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.6);
  }
}

Export Format

Preview Mode

Background

About the CSS Glassmorphism Generator

Glassmorphism in CSS is a partly transparent background plus backdrop-filter: the starting glass here is background: rgba(255, 255, 255, 0.5), backdrop-filter: blur(16px) saturate(180%), border: 1px solid rgba(255, 255, 255, 0.3), border-radius: 16px and box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1). The CSS Glassmorphism Generator writes backdrop-filter and -webkit-backdrop-filter, because Safari 9 to 17 reads only the prefixed name.

backdrop-filter browser support (MDN browser-compat-data)

Browser	backdrop-filter from	-webkit-backdrop-filter
Chrome	76	No
Edge	79	17 to 78
Firefox	103	No
Safari	18	From 9
Safari on iOS	Same as Safari	Same as Safari

MDN lists backdrop-filter as Baseline 2024, working across the latest browsers since September 2024. Chrome for Android follows Chrome.

The built-in presets and the CSS they write

Preset	background	backdrop-filter	border-radius	box-shadow
iOS Frosted	rgba(255, 255, 255, 0.7)	blur(20px) saturate(180%)	20px	0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.35)
macOS Surface	rgba(255, 255, 255, 0.4)	blur(12px) saturate(150%)	12px	0 5px 20px rgba(0, 0, 0, 0.1), inset 0 0 12px rgba(255, 255, 255, 0.35)
Dark Glass	rgba(31, 41, 55, 0.3)	blur(16px) saturate(200%)	16px	0 8px 25px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.35)

Every preset also writes border: 1px solid rgba(255, 255, 255, 0.3) and -webkit-backdrop-filter with the same value.

Frequently asked questions

Why is my backdrop-filter not working?: MDN: the effect shows only when the element, or its background, is transparent or partly transparent, so a Tint opacity of 1 gives a solid panel with nothing to see through. It also needs something behind the element to blur; a plain color looks the same blurred. Browsers that read neither spelling get the @supports not (...) fallback, which makes the tint 0.1 more opaque (0.5 becomes 0.6).
What are the Tailwind classes for glassmorphism?: For the starting glass: bg-[rgba(255,255,255,0.5)] backdrop-blur-[16px] backdrop-saturate-[180%] border border-[rgba(255,255,255,0.3)] rounded-[16px] shadow-[0_5px_20px_rgba(0,0,0,0.1)]. The Tailwind output gives them as an @apply rule for a .glass class and as a class list to put on the element.
What does Inner Glow do?: It adds a white glow along the inside edge, written into the same box-shadow as inset 0 0 (glow × 4)px rgba(255, 255, 255, 0.35): 2.5 gives inset 0 0 10px, and 0 leaves it out. It does not brighten the whole panel.
Can the glass be a color other than white?: Yes. Color sets the tint and Tint opacity its alpha, from 0 (clear glass) to 1 (solid): the Dark Glass preset writes rgba(31, 41, 55, 0.3). The border is white, 0 to 8 px wide at an opacity of 0 to 1 (1px at 0.3 to start; 2 px at 0.5 writes border: 2px solid rgba(255, 255, 255, 0.5)), and the shadow is black at 0.1.
Does the CSS set a text color?: No. The preview picks black or white text for the glass over the chosen background, an estimate that ignores the colored shapes behind it, but the exported CSS leaves the text color to your page. Check the contrast of your own text over your own background.

Network use

This tool loads a background photo from picsum.photos only when you select one of the photo backgrounds. Privacy policy

Where frosted glass works

Frosted glass reads well where something busy sits behind the panel: a sign-in card over a hero photo, a sticky navigation bar over scrolling content, a modal over a dashboard. Pick the card, modal, navbar or button preview and one of six backgrounds to see how much blur the text on top needs, or start from iOS Frosted, macOS Surface or Dark Glass. Set the white edge from 0 to 8 px wide and its opacity from 0 to 1, then copy the result as CSS, SCSS or Tailwind classes; the HTML switch beside the format shows a matching snippet and makes the copy button copy that instead. Presets you save are kept in this browser.

The declarations behind the glass

Every output comes from one set of declarations:

background: rgba(r, g, b, tint opacity)
backdrop-filter: blur(B px) saturate(S%)
border: W px solid rgba(255, 255, 255, edge opacity), 1px at 0.3 to start; a width of 0 writes border: none
box-shadow: 0 offset blur rgba(0, 0, 0, 0.1), inset 0 0 (glow × 4)px rgba(255, 255, 255, 0.35)

plus the corner radius. backdrop-filter blurs and saturates whatever is behind the element, so the tint must be partly transparent for the effect to show. The CSS repeats the filter as -webkit-backdrop-filter (MDN browser-compat-data: unprefixed in Chrome 76, Edge 79, Firefox 103 and Safari 18; Safari 9 to 17 reads only the prefixed name) and adds an @supports not (...) block that makes the tint 0.1 more opaque in browsers that read neither. The shadow falls straight down; there is no horizontal offset.

Example: the iOS Frosted preset writes background: rgba(255, 255, 255, 0.7), backdrop-filter: blur(20px) saturate(180%), border-radius: 20px and box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.35); its fallback tint is rgba(255, 255, 255, 0.8).

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.