Glassmorphism CSS Generator

Adjust blur, transparency, saturation, tint and border to build a frosted glass panel, then copy a six-line .glass rule with the Safari-prefixed backdrop-filter already in it.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Frosted glass

CSS

.glass {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Tip. backdrop-filter only shows through to what is behind the element, so place the card over a photo or gradient rather than a flat colour.

Quick answers

How do I create a glass effect in CSS?: Give the element a semi-transparent background such as rgba(255, 255, 255, 0.22) and add backdrop-filter: blur(14px). A 1px semi-transparent border and a soft box-shadow complete the look. The element must sit over something with visible detail, or there is nothing to blur.
What is the difference between filter and backdrop-filter?: filter: blur() blurs the element itself, including its text and children. backdrop-filter: blur() leaves the element sharp and blurs only what is painted behind it. Glassmorphism needs backdrop-filter.
Why is my backdrop-filter not working?: Usually one of three things: the background behind the element is a flat color, so the blur changes nothing; the element's own background is fully opaque and covers the blurred result; or an older Safari needs the -webkit-backdrop-filter line, which this generator includes.
Do I still need -webkit-backdrop-filter?: For older Safari, yes. Safari supported the property only with the -webkit- prefix until version 18, so iPhones and Macs that have not been updated ignore the unprefixed line. Keeping both lines costs nothing.
How much blur should a glass card have?: Between about 8 and 20 pixels for cards and navigation bars. Below that the background stays busy and competes with text. Much above that the backdrop becomes an even wash and the panel stops looking like glass. Larger values also cost more to render.

How Glassmorphism Generator works

A glass panel in CSS is four things working together: a semi-transparent background, a backdrop-filter that blurs whatever is behind the element, a faint border that reads as the edge of the pane, and a soft shadow that lifts it off the page. This generator sets each one. Backdrop blur runs from 0 to 40 pixels, Fill opacity and Border opacity from 0 to 100 percent, Saturation from 100 to 250 percent and Corner radius from 0 to 60 pixels, with a Glass tint color used for both the fill and the border. The output writes backdrop-filter and -webkit-backdrop-filter together and adds a fixed box-shadow.

Glassmorphism CSS examples: light, dark and tinted

Each result is the CSS the tool produced for those settings. Every rule also includes box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25).

Default light glass

Backdrop blur 14, Fill opacity 22, Saturation 160, Corner radius 20, Glass tint #ffffff, Border opacity 40

background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 20px;

Subtle light glass

Backdrop blur 8, Fill opacity 10, Saturation 100, Corner radius 12, Glass tint #ffffff, Border opacity 20

background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px) saturate(100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;

The matching -webkit- line is omitted here for length; the tool always writes it.

Dark glass for a dark interface

Backdrop blur 30, Fill opacity 25, Saturation 200, Corner radius 16, Glass tint #0f172a, Border opacity 15

background: rgba(15, 23, 42, 0.25); backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(15, 23, 42, 0.15); border-radius: 16px;

On dark glass a dark border disappears. Replace the border color by hand with a low-opacity white, such as rgba(255, 255, 255, 0.15), for a visible edge.

Frosted navigation bar

Backdrop blur 12, Fill opacity 70, Saturation 180, Corner radius 0, Glass tint #ffffff, Border opacity 0

background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0); border-radius: 0px;

A high fill keeps menu text readable while page content scrolls underneath.

Sky-blue tinted pane

Backdrop blur 10, Fill opacity 33, Saturation 140, Corner radius 20, Glass tint #38bdf8, Border opacity 50

background: rgba(56, 189, 248, 0.33); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(56, 189, 248, 0.5); border-radius: 20px;

What each control writes into the CSS

Control	Range	Starts at	CSS it sets
Backdrop blur	0 to 40 px	14	blur() inside backdrop-filter and -webkit-backdrop-filter
Fill opacity	0 to 100%	22	Alpha of the background rgba() color
Saturation	100 to 250%, step 5	160	saturate() inside both backdrop-filter lines
Corner radius	0 to 60 px	20	border-radius
Glass tint	Any color	#ffffff	Red, green and blue of the background and the border
Border opacity	0 to 100%	40	Alpha of the 1px solid border color

box-shadow is fixed at 0 8px 32px rgba(15, 23, 42, 0.25) and has no control.

Why a glass card can look like a plain solid box

backdrop-filter filters the pixels behind an element and then paints the element on top. If those pixels are one flat color, a blurred flat color is the same flat color and nothing appears to happen. The effect needs variation underneath: a photograph, a gradient, colored shapes or page content scrolling beneath a fixed bar.

The second cause is the fill. The element's own background is painted over the blurred backdrop, so at Fill opacity 100 the generator outputs an alpha of 1 and the blur is completely hidden. Somewhere between 10 and 30 percent keeps the glass character; 60 to 80 percent is a reasonable trade when text legibility matters more.

The preview on this page sits on a checkered background, which shows the blur and transparency responding to the sliders but is plainer than a real layout. The preview box also layers a diagonal gradient of the tint over the fill, which the copied rule does not include, so the pasted panel is slightly more transparent than the preview. Paste the rule over your actual background before settling on values, since the same settings read very differently over a dark photo and a pale gradient.

Saturation is the control people skip. Blurring averages neighboring pixels, which drags colors toward gray. Raising saturate() above 100 percent restores the color the blur removed, and the default of 160 is a moderate setting.

Keeping text readable on glass

Text on a translucent panel sits over a background you do not fully control, so contrast has to hold in the worst case.

Check contrast against the lightest and darkest areas that can appear behind the panel. WCAG AA asks for 4.5:1 for normal-size text.
Raise Fill opacity before raising blur. Blur smooths detail, but only the fill changes the average brightness behind the text.
Use white-tinted glass with dark text over light imagery and dark-tinted glass with light text over dark imagery.
Add a fallback for browsers without the property: put a more opaque background in the base rule and the translucent one inside @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)).
Respect the prefers-reduced-transparency media query where it is supported by switching to a solid background.
Keep glass surfaces few and small. Each one makes the browser re-blur its backdrop whenever the content behind it changes, which includes every frame of a scroll.

backdrop-filter browser support

Browser	Unprefixed backdrop-filter	Notes
Chrome and Edge	From version 76 and 79	No prefix needed
Firefox	From version 103	Earlier versions had it behind a preference, off by default
Safari (macOS and iOS)	From version 18	Versions 9 to 17 need -webkit-backdrop-filter

The generated rule writes both the standard and the -webkit- line, which covers all of the above.

How to use it

1
Raise Backdrop blur until the content behind the panel is soft enough to read text over. 10 to 20 pixels suits most cards.
2
Set Fill opacity. Lower values look more like clear glass; higher values make text on the panel easier to read.
3
Adjust Saturation. Values above 100 percent put back color that blurring washes out.
4
Pick a Glass tint: white for light glass, black or a dark shade for dark glass, or a brand color for a tinted pane.
5
Set Border opacity for the edge highlight and Corner radius for the rounding.
6
Copy or download the CSS panel and apply .glass to an element that sits over an image, gradient or other varied content.

Common questions

What is glassmorphism?

A user interface style built on panels that look like frosted glass: translucent, with the background blurred behind them, a thin light border and a soft shadow. It is used for cards, navigation bars, modals and overlays placed on top of colorful backgrounds.

Does backdrop-filter slow a page down?

It can. The browser has to blur the area behind the element and redo that work whenever the content underneath changes. A few small panels are fine on most devices; a full-screen blurred layer over scrolling content can cause dropped frames on low-powered phones.

Can I use the glass effect on a dark background?

Yes. Choose a dark Glass tint or keep white at a low Fill opacity, around 5 to 15 percent. The backdrop still needs detail to blur, so place glowing shapes, a gradient or an image behind the panel instead of flat black.

Why does the generated border use the same color as the fill?

The tool uses one Glass tint for both and varies only the opacity. With a white tint this gives the bright edge that makes the pane look lit. With a dark tint, swap the border color for a translucent white after copying.

Can I change the shadow?

Not in the tool. The box-shadow line is always 0 8px 32px rgba(15, 23, 42, 0.25). Edit or delete it after copying; a lighter shadow suits small chips, and nested glass panels usually look better with none.

Does the blur follow the rounded corners?

Yes. The blurred area is clipped to the element's own border-radius, so the rounded corners from Corner radius apply to the blur as well. If a parent has its own backdrop-filter or filter, nested glass may not see through it to the page behind.

Is blur(0px) the same as no backdrop-filter?

Visually the blur part does nothing at 0, but the saturate() function in the same declaration still applies, so colors behind the panel are still intensified. Set Saturation to 100 as well for a plain translucent panel.