CSS Glassmorphism Generator

How it works

Type the text that should appear inside the card; the preview draws a frosted glass card with it on a colourful background. The blur slider decides how much everything behind the card is smeared: 10 pixels suits most designs, and above 20 the background becomes unrecognisable. Fill opacity sets the colour of the glass itself: 25% is written as rgba(255, 255, 255, 0.25). Lower values make the glass clearer but the text on it harder to read. Border visibility controls the thin bright edge of the glass. Enter a dark colour such as #0f172a to get smoked glass for a dark theme. The code writes the blur twice: -webkit-backdrop-filter for older Safari and iPhones, backdrop-filter for everything else. At the bottom an @supports fallback raises the opacity to 85% in browsers that do not know the effect. Remember that the glass only shows when there is a colourful image or pattern behind it.

This tool is also known as glassmorphism generator, glassmorphism css, frosted glass css, backdrop filter blur css, glass effect css, css glass card.

What is Glassmorphism?

Glassmorphism is a design style that draws interface panels like frosted glass: semi-transparent, with whatever lies behind them blurred. It spread around 2020 with Apple's macOS Big Sur and Microsoft's Fluent design. It adds a sense of depth between layers, but it needs a decorative background and careful work on text contrast.

What is backdrop-filter?

backdrop-filter is the CSS property that applies filters such as blur(), brightness() or saturate() to the area BEHIND an element rather than to the element itself. The element's own background must be at least partly transparent for the effect to show. Because it is recalculated as the page scrolls, it can cost performance on large areas and weak devices.

backdrop-filter vs filter: what is the difference?

filter processes the element ITSELF: with filter: blur(10px) the card's text and border blur too. backdrop-filter processes what lies BEHIND the element; the card's own text stays sharp and only the photo showing through is blurred. For a frosted glass card the right property is backdrop-filter; filter is for blurring an image or a whole section.

The catch: on a flat background the glass is invisible

backdrop-filter blurs the pixels BEHIND the card. If the card sits on a single flat colour, there is nothing to blur and it looks like an ordinary semi-transparent box. Glassmorphism needs a photo, gradient or shapes behind it.

The second catch is legibility. At 10% fill opacity the contrast of the text depends entirely on the image behind it, and a light patch will swallow white text. For cards that carry text, keep the opacity between 20% and 40% and test with real content over the worst part of the background.

Browser support and when to use it

backdrop-filter works in all current major browsers, but the details matter:

• Safari and iPhones before version 18 only understand the -webkit- form → the code includes both lines
• Firefox did not support it before version 103 (2022) → the @supports fallback keeps text readable
• Heavy blur can slow scrolling on weak phones → stay under 20 pixels on full-screen layers
• Good places: navigation bars, modal dialogs, cards on top of photos
• Poor places: long text sections, tables, forms

Frequently asked questions

Which CSS properties make glassmorphism?

Four parts are enough: a semi-transparent background (rgba), backdrop-filter: blur() to blur what is behind, a thin semi-transparent border and a soft shadow. border-radius rounds it off. This tool writes all five in one rule.

Why is the same line written twice with -webkit-?

For years Safari only understood backdrop-filter as -webkit-backdrop-filter; the unprefixed name arrived in Safari 18 (2024). Older iPhones and Macs need both lines for the effect to work. Browsers ignore lines they do not know, so the duplicate does no harm.

How do I make dark, smoked glass?

Enter a dark glass colour such as #0f172a, set fill opacity to 30–50% and leave border visibility at about 10%. Make the text inside the card white.

What does Download save?

A 1200×800 PNG of the preview. Use Copy output for the code itself. The preview blur is drawn with the browser's canvas filter; older browsers without it may show the preview unblurred, which does not affect the CSS.