Glassmorphism CSS Generator
Builds frosted glass and checks what usually breaks in this style: whether text stays readable on top. Preview it on your image or on a card, sticky header or button.
Scroll down — the background slides under the header. Glass on a sticky header behaves differently than on a card: readability changes as you scroll.
Card title
Regular text on glass. This is what trips you up: a big heading survives, while a smaller line vanishes over a light patch of the background.
Below is a button made of the same glass.
What follows is just space, so the background scrolls fully under the header and the worst position shows up.
You can drag an image straight onto the preview or paste it from the clipboard. It is parsed in your browser and never leaves it. "Busy" is the hard case: patches from near-white to near-black. A smooth gradient forgives any settings; this background does not.
A trick people forget: without it the glass turns washed out, because blur on its own dulls the color.
Is the text readable
We compute it the way the browser renders: blur the background, apply saturate, lay a semi-transparent fill on top — then measure the text contrast at every point underneath. The 4.5:1 threshold comes from WCAG 2.1 for normal text.
Generated code
The backdrop-filter property works in Chrome, Edge, and Safari, and in Firefox since version 103, released in 2022. The -webkit- prefix is needed for installed Safari builds, and it costs nothing. Rendering isn't free: the browser spins up a separate layer and recomputes the blur on every scroll, so don't put glass on dozens of cards in a long list.
We reproduce what the browser does: blur the background, apply saturate, lay a semi-transparent fill on top, and measure the text contrast at every point underneath. The report shows the worst spot and the share of area where the text stays readable. The 4.5:1 threshold for body text comes from WCAG 2.1.
A sticky header stays in place while the background scrolls behind it in full. The label holds up over a dark patch, disappears over a light one, and a static preview cannot reveal this. We run the header across the entire height of the background and show the worst position, not just the first one we hit.
Glass usually gets layered over a banner of your own, but tested against someone else's photos. Upload your own image: it is processed in the browser and goes nowhere. Ready-made backgrounds are available alongside, including a busy one with spots ranging from almost white to almost black. A smooth gradient forgives any settings; this background forgives none.
If the label fails the threshold, click "Adjust opacity". We find the smallest value at which the text reads on all three samples at once. Smallest matters: the higher the opacity, the less glass is left in the glass. When the threshold is unreachable even with a solid fill, the tool says so instead of silently hitting the limit.
A browser without backdrop-filter support will show a semi-transparent fill over the background, and the card will fail. The output includes an @supports block with a solid color matched to your own background: the average color of the glass over it. A separate rule covers the prefers-reduced-transparency system setting.
Chrome, Edge and Safari support the property, and Firefox does since version 103, released in 2022. The -webkit- prefix is needed for installed Safari builds and costs nothing, so the code keeps it at all times. Rendering is expensive: the browser creates a separate layer and recalculates the blur on every scroll, so glass on dozens of cards in a long list visibly eats into the frame rate.
The finished rules export as CSS, an SCSS mixin, a set of Tailwind classes, and HTML markup. Glass colors are easy to pick with a palette from an image using the same banner, and the pair of text and background can be checked separately with HTML color codes.
Rate this tool
Help us get better
Tell us what was missing.
Other tools
HTML Special Characters
487 characters in twelve sections, with click-to-copy.
Visual HTML Editor
Type as in a text editor and get ready-made HTML.
HTML Color Codes
Color codes in HEX, RGB, HSL and HSB, with a contrast check
CSS to SCSS
Flat CSS becomes SCSS with nesting, and back, verified against your source.
CSS Grid Generator
A grid for three screens, with ready HTML and a block-order check
CSS Gradient Generator
Gradients without a gray middle, with a text readability check
Box Shadow Generator
Layered shadows, previewed on two backgrounds with a visibility check
Color Converter
A color in ten notations, with sRGB and P3 coverage checks