CSS Glassmorphism Generator

About Glassmorphism Generator

Designs a frosted-glass panel — a semi-transparent tint over a blurred, saturated view of whatever is behind it — and writes the CSS with the Safari prefix and a fallback for browsers without backdrop-filter.

The effect lives in backdrop-filter, which filters what is behind the element rather than the element itself. The blur softens the background into colour; a saturation boost keeps that colour rich instead of washed out; the tint and a thin light border give the panel an edge. The preview puts the panel over bright shapes, because glass over a flat colour is just a slightly different flat colour.

The fallback matters. Without backdrop-filter support the panel would be a thin tint over a sharp, busy background, and its text would be unreadable — so the CSS includes an @supports rule that makes the panel nearly opaque where the effect is unavailable.

Where it helps

• Writes the -webkit- prefix Safari still needs.
• Includes an @supports fallback so text stays readable without backdrop-filter.
• Previews over bright shapes, where the effect is actually visible.
• Warns when the tint is too faint for text to be reliable.

Limits

• backdrop-filter is expensive to redraw; many glass panels, or glass over scrolling content, can drop frames on phones.
• Legibility depends on what is behind the panel, which changes as the page scrolls — test text contrast over the busiest part of the background.
• It needs something colourful behind it to look like glass at all.

Frequently asked questions

Why does my glass look like a plain grey box?

backdrop-filter only affects what is behind the element. If the background is a flat colour, blurring it changes nothing — glass needs shapes, gradients or imagery behind it.

Does it work in Safari and Firefox?

Yes — backdrop-filter is supported in all current browsers. Safari still requires the -webkit-backdrop-filter prefix, which the generated CSS includes.

How do I keep text readable on glass?

Raise the tint opacity or the blur until the background detail disappears behind the text, and check contrast against the lightest and darkest parts of what can scroll behind the panel.

Related tools

• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• Gradient Generator — Build linear, radial and conic CSS gradients
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it