What Is Glassmorphism? How backdrop-filter Builds Frosted Glass in CSS

Frosted glass panels are everywhere in interface design: the translucent sidebar on a desktop operating system, the blurred header that lets a photo show through, the card that floats over a gradient on a landing page. The look is simple to describe and oddly easy to get wrong in CSS. A panel ends up flat and gray, or the blur does nothing, or the white text on it is unreadable over half the background.

This guide explains the CSS that makes the effect work, why each of the five properties is there, how to keep text readable when the background keeps changing, what it costs in rendering performance, and how to fall back gracefully. The worked examples use the output of the Toolz glassmorphism CSS generator, which builds the code from sliders and a live preview.

TL;DR: Glassmorphism is a UI style where a panel looks like frosted glass: a semi-transparent background plus backdrop-filter: blur() so the content behind it shows through softly, usually finished with a 1px translucent border and a soft shadow. It needs two things to be visible: a fill that is partly transparent and something colorful behind the panel. Text contrast changes with whatever passes underneath, so test it against the brightest and darkest parts of the real background. The CSS glassmorphism generator writes the full block, including the -webkit- prefix, client-side, free, no signup.

What is glassmorphism in CSS?

Glassmorphism is a visual style that imitates frosted glass. An element gets a background color with low opacity and a backdrop filter that blurs the pixels behind it, so shapes and colors underneath appear softened through the surface. A thin light border suggests the glass edge, and a gentle shadow lifts the panel off the page.

The key property is backdrop-filter, defined in the W3C Filter Effects Module Level 2. It takes the same filter functions as filter (blur(), saturate(), brightness() and the rest) but applies them to the area behind the element rather than to the element itself. That one difference is what makes the effect possible.

Here is the complete block the generator produces for its Frosted preset:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

Six lines, and each has a job.

filter vs backdrop-filter: what is the difference?

filter changes how the element itself is drawn, including its text and children. backdrop-filter changes what shows through the element from behind, and leaves the element's own content sharp.

Property	What it affects	Blur example result	Typical use
filter: blur(10px)	The element and all its children	The card and its text are blurry	Image effects, disabled states, loading placeholders
backdrop-filter: blur(10px)	Whatever is painted behind the element	The card stays sharp, the background seen through it is blurry	Frosted glass panels, blurred headers, modal overlays

If you blur a card with filter and wonder why the heading is unreadable, you used the wrong property. The CSS filter generator covers the filter side of the pair.

How does each line of the glass CSS work?

The background is the tint, and its alpha channel is the most important number in the block. rgba(255, 255, 255, 0.2) is white at 20% opacity. At an alpha of 1 the panel is solid and nothing shows through, so the backdrop blur is invisible. At an alpha of 0 there is no surface at all. Most usable glass sits between 0.1 and 0.4.

In the generator this is the Transparency slider, and the naming needs a note: the slider sets the opacity of the fill, so a higher Transparency value makes the panel more solid. Transparency 20% writes an alpha of 0.2, and 40% writes 0.4.

The backdrop filter does the frosting. blur(10px) sets the radius of the blur applied to what sits behind. saturate(120%) boosts the color of that blurred backdrop by 20%, which counteracts the gray, washed-out look that blur plus a white tint tends to produce. The generator's Blur slider runs from 0 to 40px and Saturation from 100% to 200%.

The prefixed copy exists because older Safari releases only understand -webkit-backdrop-filter. Writing both lines with identical values costs nothing and covers those versions.

The border radius rounds the corners, 0 to 50px in the generator. The blur is clipped to the rounded shape.

The border is a 1px line of white at 18% opacity. It catches the eye as a highlight on the glass edge and matters most on darker backgrounds, where the panel boundary would otherwise dissolve. The generator's Border checkbox turns it on or off; the color and width are fixed.

The shadow 0 8px 32px rgba(0, 0, 0, 0.12) is a wide, faint drop shadow that separates the panel from the page. If you want to tune it, the box shadow guide explains offset, blur and spread in depth.

What do the generator presets produce?

The presets are starting points rather than finished designs. All five use a 16px radius, and all except Subtle include the border.

Preset	Background	Backdrop filter	Border	Best over
Frosted	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	On	Colorful gradients and photos
Light	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	On	Busy images where text needs more support
Dark	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	On	Light photos, white text
Vibrant	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	On	Dark or saturated hero sections
Subtle	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	Off	Small chips and badges

The generator loads with Frosted selected. Click a preset, adjust the sliders and the tint color, and the code block updates as you drag.

Why does my backdrop-filter not work?

When the blur appears to do nothing, one of these is almost always the cause.

1. The background is opaque. A solid background: #fff or an alpha of 1 hides the backdrop completely. Lower the alpha.
2. There is nothing behind it to blur. Over a flat single-color page, a blurred flat color looks identical to the flat color. Glass needs a gradient, a photo or shapes behind it. The generator's preview deliberately sits over a gradient with colored circles for this reason; the CSS gradient guide is a good source of backgrounds that show the effect well.
3. The prefix is missing. Older Safari versions ignore the unprefixed property.
4. An ancestor limits what the filter can see. In the current Filter Effects specification, some properties on an ancestor, such as its own filter, an opacity below 1 or another backdrop-filter, start a new backdrop root, and the blur only samples content inside that root. If the glass sits inside a wrapper with one of these, move the effect or the property.
5. The panel has no size or is fully transparent in another way. A zero-height element or opacity: 0 on the panel hides the effect along with the panel.

How do you keep text readable on a glass panel?

Readable glass takes more work than any other part of the style, because the text color is fixed while the background under the panel is not. The WCAG 2.2 contrast minimum asks for a ratio of at least 4.5:1 for normal text and 3:1 for large text. On a translucent panel that ratio depends on what is behind each part of the panel at that moment.

A worked example makes this concrete. The contrast ratio is computed from the relative luminance of the two colors, (L1 + 0.05) / (L2 + 0.05). A glass fill composites over the background: each channel becomes alpha times the fill plus (1 minus alpha) times the backdrop. Blur averages neighboring pixels but leaves a region's average color roughly where it was, so over a large area of one color the composite is a fair estimate.

Fill	Backdrop color	Composite color	Contrast with white text
Frosted, white at 0.2	Blue #60A5FA	about rgb(128, 183, 251)	about 2.1:1
Frosted, white at 0.2	Yellow #FBBF24	about rgb(252, 204, 80)	about 1.5:1
Dark, rgba(15, 23, 42, 0.25)	Blue #60A5FA	about rgb(76, 130, 198)	about 4.0:1

Take the first row. Red is 0.2 x 255 + 0.8 x 96 = 127.8, green is 0.2 x 255 + 0.8 x 165 = 183, blue is 0.2 x 255 + 0.8 x 250 = 251. That color's relative luminance works out near 0.454, and white's is 1, so the ratio is 1.05 / 0.504, about 2.1:1. The same panel over the yellow part of the background drops to about 1.5:1. Neither passes for body text, and the Dark preset over blue reaches about 4.0:1: enough for large text, still short of 4.5:1 for small text.

The practical fixes, in order of effectiveness:

• Raise the fill alpha. Moving Transparency from 20% to 40% hides more of the backdrop and narrows the range the contrast swings across.
• Darken the tint for light text, or lighten it for dark text. Dark glass with white text holds up over far more backgrounds than white glass with white text.
• Increase the blur. It smooths out high-contrast detail, so a thin white line behind a letter does not cut through it.
• Add a text shadow as a last resort for headings. The text shadow generator makes a soft one quickly.
• Test at the extremes. Check contrast over the brightest and darkest regions the panel can sit on, with the color contrast checker, not at one convenient spot.

The generator's copied CSS covers the glass surface only. The white text in its preview is not part of the output, so set color on your element yourself.

Does backdrop-filter hurt performance?

It can. A backdrop blur forces the browser to read back the pixels behind the element and run a blur over them every time that area changes. On a static card that is cheap. On a large area, during scrolling, or when content animates behind the panel, it is one of the more expensive effects to composite, and lower-powered phones show it first as dropped frames.

Guidelines that keep it under control:

• Keep glass panels modest in size. A full-viewport frosted overlay costs far more than a card.
• Prefer smaller blur radii. The cost grows with the radius, and past about 20px the visual difference is small.
• Avoid animating the blur value itself. Animate opacity or transform of the panel instead.
• Be careful with sticky headers over long scrolling content, which re-blur on every scroll frame. Test on a real mid-range phone.

How do you add a fallback for browsers or users that need one?

Current versions of Chrome, Edge, Firefox and Safari all support backdrop-filter. Very old browsers ignore it and show the semi-transparent fill without the blur, which at low alpha can leave text on a busy background. Two small additions make the effect degrade well. You can check the current support table on MDN's backdrop-filter page.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

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

The @supports block only applies the translucent version where the blur exists. The prefers-reduced-transparency media feature, defined in Media Queries Level 5, lets users who have asked their operating system for less transparency get a solid panel. Browser support for that media feature is still partial, so treat it as an improvement where available rather than the only safeguard.

Glassmorphism vs neumorphism vs flat design

Glassmorphism is one of several surface styles, and each has a different cost.

Style	How the surface is made	Main CSS	Strength	Main risk
Glassmorphism	Translucent fill plus backdrop blur	background with alpha, backdrop-filter	Depth and context from the background	Contrast varies, blur costs performance
Neumorphism	Same color as the page, raised or pressed by paired shadows	Two box-shadow layers	Soft, tactile controls	Very low contrast between control and page
Flat	Solid fills, no depth	background	Fast and predictable	Can feel plain
Material-style elevation	Solid fill with shadow depth levels	box-shadow	Clear hierarchy	Less atmospheric

If the soft, extruded look is closer to what you want, the neumorphism generator builds the paired shadows. Many interfaces mix styles: glass for a floating navigation bar over a hero image, flat cards for dense content below it.

How to build a glass card, start to finish

1. Open the frosted glass CSS generator and pick the preset closest to your background: Dark for light photos, Frosted or Light for colorful gradients.
2. Set Blur high enough that background detail does not compete with text, usually 8 to 16px.
3. Set Transparency. Start at 20% and raise it until your text passes contrast over the harshest part of the background.
4. Choose a tint with the color picker. A tint drawn from the background's own palette looks more natural than pure white.
5. Adjust Radius to match the rest of your components, and keep Border on for dark backgrounds.
6. Click Copy CSS and paste the block onto your card class. Add color and padding yourself.
7. Wrap the block in the @supports fallback above if you support older browsers.

Everything in the generator runs in your browser, so nothing is uploaded and it keeps working offline after the page loads. For related surface and effect tools, the CSS tools hub lists gradients, shadows, filters and transitions in one place.