Glassmorphism Generator

Glassmorphism is the look of frosted glass: a panel that is partly see-through, blurs the shapes behind it and picks up their colour. Operating systems use it for menus and sidebars, and websites copy it for cards, navigation bars and modals. The effect rests on one CSS property, backdrop-filter, plus a few supporting choices that decide whether it looks like glass or like a blurry mistake. This page lets you set those choices with sliders and copy the finished rule.

What makes glass

Three ingredients work together. A background with some transparency, such as rgba(255, 255, 255, 0.25), lets the page show through. backdrop-filter: blur(10px) blurs whatever sits behind the element, which is the part that feels like frosting. A thin, lighter border and a soft shadow lift the panel off the page and catch the eye like a bevelled edge. Remove any one of them and the effect gets weaker.

The worked example

The Sample button loads the Frosted preset. With a white glass color, 25% opacity, a 10 pixel blur, 180% saturation, a 30% border, a 16 pixel radius and the shadow switched on, the page writes: background: rgba(255, 255, 255, 0.25); then -webkit-backdrop-filter: blur(10px) saturate(180%); and the same line without the prefix, then border: 1px solid rgba(255, 255, 255, 0.3);, border-radius: 16px; and box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);. The saturate step makes the colours behind the glass richer, a trick that stops a blur from looking washed out.

Choosing the settings

Opacity decides how much of the glass colour shows: low values show more of the backdrop, high values feel more like a solid card. Blur sets the frosting; saturation at 100% leaves colours alone and the page then leaves saturate() out of the rule. The dark preset uses a near-black tint at 45% with less saturation and a fainter border, which suits dark themes. The light mist preset raises opacity to 55% and drops the shadow for a calm, paper-like panel.

Contrast and readability

Glass changes the colour behind your text as the page scrolls, so text contrast can pass in one position and fail in another. Test the text against the busiest and the brightest part of the backdrop, not just the average, and consider a slightly higher opacity or a darker tint where reading matters. Use the contrast checker for the numbers. Also remember that blur does not hide a distracting image: a sharp photo of a face behind a card is still a face.

Edge cases

The effect needs something to blur. On a plain white page the glass card looks like a flat translucent box. backdrop-filter creates a new stacking context and a containing block for fixed-position descendants, which can break layouts that depend on position: fixed inside the card. Performance on large blurred areas can drop on low-end phones, so avoid stacking many glass layers or animating the blur.

Limits

All current browsers support the property; very old ones ignore it, so keep a background that still reads well without the blur. The generator makes one panel style and does not choose the backdrop for you. Everything is computed in your browser.

Related tools

• Box Shadow Generator builds the soft shadow around the card.
• CSS Gradient Generator makes colourful backdrops for the glass to blur.
• Neumorphism Generator covers the opposite soft-UI style.
• Contrast Checker tests the text colour against the glass.