Design frosted glass on a real backdrop and copy it as plain CSS, Tailwind CSS 4 classes or a Bootstrap 5 class. Set the blur, tint, saturation, brightness, border, inner highlight, shadow, corner radius and an optional noise texture, then preview it on a glass navbar, card, text field and button.

The generator also measures what most glass effects get wrong: readability. It blurs and filters the backdrop the same way the browser does, samples the area behind the glass and shows the text contrast at the worst spot. If it falls below 4.5:1, Fix contrast raises the tint opacity just enough to pass. Every output includes a nearly solid fallback for browsers without backdrop-filter and for people who ask for reduced transparency.

Glassmorphism generator Frosted glass to CSS, Tailwind CSS 4 and Bootstrap 5, with a live contrast check

Presets

Preview

Backdrop

Your image stays in this browser tab. It is never uploaded. The fallback is what browsers without backdrop-filter, or people who ask for reduced transparency, will see.

Text contrast

– Measuring

Worst spot under the glass

The backdrop is blurred and filtered exactly like the glass, tinted, and sampled across the navbar and the card. The lowest ratio between the text colour and any sampled point is shown. Body text needs 4.5:1. Fix contrast raises the tint opacity until the worst spot reaches 4.65:1, a little headroom for differences between browsers.

Code

Used for the CSS and Bootstrap class and the Tailwind tokens, for example .glass.

CSS with fallbacks

Glass

Edge

Shadow

Text and texture

A faint SVG grain, like frosted acrylic. It is left out of the contrast check because it averages out.

How to use it

  1. Pick a preset, such as uiCookies kit, Frosted light, Smoky dark, iOS-like or Acrylic, to start from a finished look.
  2. Choose a backdrop that matches your design: gradient orbs, a mesh gradient, a sunset, night lights, busy stripes, a solid colour, or upload your own image, which stays in your browser.
  3. Adjust the glass: blur, tint colour and opacity, saturation and brightness, then the border, inner highlight, corner radius, shadow and text colour. Tick Noise texture for a frosted acrylic grain.
  4. Watch the Text contrast panel. It shows the lowest ratio between the text colour and the glass anywhere behind the navbar and the card, and marks that spot. Press Fix contrast if it fails, and tick Preview the fallback to see the version without blur.
  5. Set a class name, choose the CSS, Tailwind 4 or Bootstrap 5 tab and copy the code. Copy link saves the whole setup in the URL.

What glassmorphism is

Glassmorphism is a style where panels look like frosted glass: you can see blurred shapes and colour from the background through them, while a semi-transparent tint keeps the content on top readable. A thin light border and a soft highlight along the top edge suggest the edge of a glass sheet, and a soft shadow lifts it off the page.

The effect only works when there is something colourful behind the glass. Over a flat white page, frosted glass looks like a plain grey box, which is why glass designs usually sit on gradients, photographs or shapes of colour.

In CSS, the look is made from a semi-transparent background colour, the backdrop-filter property for the blur, a border with transparency, box-shadow for the highlight and the lift, and border-radius for the corners.

backdrop-filter and performance

backdrop-filter applies filter functions to whatever is painted behind an element, inside the element's own shape. blur() frosts it, saturate() above 100% makes the colours that show through more vivid, and brightness() lightens or darkens them. The element's own background must be partly transparent, or the filtered backdrop cannot be seen.

All current browsers support backdrop-filter. Safari before version 18 needs the -webkit-backdrop-filter prefix, so the generated CSS includes both lines. Tailwind CSS 4 writes both lines for you.

Blurring the backdrop is work for the graphics processor, and it has to be redone whenever anything behind the glass moves. A few glass panels are fine, but large blur values on many elements, glass over video, or glass on elements that scroll over animated content can lower the frame rate on slower phones. Keep the blur moderate, avoid stacking glass inside glass, and do not animate the blur value itself.

Making glass accessible

Text on glass is only as readable as the brightest or darkest spot that can sit behind it. A tint that keeps 4.5:1 over a pale part of the background can fail when a saturated shape or a dark area of a photo slides underneath. This generator therefore checks the contrast against the worst sampled point behind the glass, not an average, and WCAG 1.4.3 asks for 4.5:1 for normal text and 3:1 for large text.

The most reliable fixes are a more opaque tint, a stronger blur that smooths out busy detail, or a text colour with more contrast against the tint. Lowering brightness under dark glass, or raising it under light glass, also helps. Interactive elements on glass need a visible edge, since WCAG 1.4.11 asks for 3:1 for the boundaries of controls.

Some people turn on a reduce transparency setting in their operating system, which browsers expose as the prefers-reduced-transparency media query. The generated code makes the glass nearly solid and removes the blur for them, and does the same in an @supports not block for browsers without backdrop-filter, so text never ends up on a clear, unblurred background. A prefers-contrast: more rule makes the glass more opaque and the border solid.

Using the output in Tailwind CSS 4 and Bootstrap 5

The Tailwind tab gives ready classes such as bg-white/60, backdrop-blur-[18px], backdrop-saturate-[150%], border-white/80, rounded-[20px] and an arbitrary shadow-[...] that holds both the inset highlight and the outer shadow. Fallback classes use arbitrary @supports and @media variants plus contrast-more:. For repeated use, the @theme block turns the glass into tokens, so classes like bg-glass, backdrop-blur-glass and shadow-glass work with every variant.

The Bootstrap tab gives a class to load after Bootstrap. It sits on .card, .navbar, .btn and .form-control, and extra rules keep buttons and fields frosted on hover and focus, where Bootstrap's own state styles would otherwise replace the background.

The token names match our free Glassmorphism UI kit, so glass made here fits next to its buttons, forms, cards, navigation and dashboard.

Use it with our free components: Glassmorphism UI kit · Gradient generator · Background patterns

Frequently asked questions

Why does my glass effect not blur anything?

backdrop-filter only blurs what is painted behind the element, so there must be visible content or colour behind it, and the element's background must be partly transparent. Also check that a parent does not create a new backdrop root, for example with its own filter, opacity below 1 or backdrop-filter, because the blur then only sees that parent's content. Safari before version 18 also needs the -webkit-backdrop-filter prefix.

How much blur and opacity should glassmorphism use?

A blur of about 12 to 24 pixels with a tint opacity of 50 to 75 percent works for most interfaces. Busy or high-contrast backgrounds need more blur, more opacity or both. Use the contrast readout rather than a fixed rule: the right value is the lowest opacity at which the worst spot behind your text still reaches 4.5:1.

Is glassmorphism accessible?

It can be, if the text keeps enough contrast against the glass wherever the background is busiest, controls have clear edges, and there is a fallback. Make the glass nearly solid for prefers-reduced-transparency and for browsers without backdrop-filter, and avoid placing long text over photos or moving backgrounds.

How do I make glassmorphism in Tailwind CSS 4?

Combine a background with an opacity modifier, such as bg-white/60, with backdrop-blur-[18px], an optional backdrop-saturate-[150%], a translucent border such as border border-white/80, a rounded-* class and a shadow. To reuse the look, define --color-glass, --blur-glass, --radius-glass and --shadow-glass inside @theme and use bg-glass, backdrop-blur-glass, rounded-glass and shadow-glass.

Does backdrop-filter slow down a page?

It costs more than a plain background because the browser has to blur the pixels behind the element each time they change. A handful of glass panels is fine on current devices. Problems appear with many blurred elements, very large blur values, glass over video or animated backgrounds, and on older phones, so use it for a few key surfaces rather than everywhere.

More free tools