Glassmorphism Generator

Glassmorphism Generator lets you design frosted-glass UI components in real time. Adjust every parameter — blur, opacity, saturation, border, and drop shadow — and see the effect update live on a sample card placed in front of a colourful gradient scene.

Glassmorphism is a design trend popularised in macOS Big Sur and Windows 11. It uses backdrop-filter: blur() to create the impression of frosted glass: the element's background is a blurred, semi-transparent window into what sits behind it. Combined with a subtle border and soft shadow, it produces a layered, depth-rich interface.

The tool is purely client-side — nothing is sent to a server. All state resets when you close the tab (use Copy CSS to save your work).

• Quick Presets — click Subtle, Frosted, Heavy, or Opaque to jump to a ready-made starting point, then fine-tune from there.
• Glass Color — the colour tint of the glass panel. White (#ffffff) gives the classic frosted look; blue or violet tints are common in dark UIs.
• Background Opacity — how opaque the tint is. Lower values (0.05–0.2) give a more see-through glass. Too high and it no longer reads as glass.
• Blur — controls backdrop-filter: blur(). 10–20 px is a realistic range; very high values (40 px+) create a dreamy soft focus. Zero disables the effect entirely.
• Saturation — boosts or reduces colour intensity in the blurred backdrop. Values above 100% make the background colours pop through the glass; values below desaturate it.
• Border — a translucent border that outlines the glass edge. Higher opacity borders improve legibility of the card edge against complex backgrounds.
• Shadow — depth cue for the card. Larger blur + higher opacity creates the impression of the card floating further above the background.
• Background Scene — choose a gradient background to test your glass against. Glassmorphism only works on top of rich, colourful backgrounds.
• When satisfied, click Copy CSS and paste the .glass class into your project.

The glass effect relies on the CSS backdrop-filter property, which applies a filter (blur, saturation, etc.) to everything behind the element. It requires the element to have at least a partially transparent background so the filtered backdrop shows through.

The generated rule uses both backdrop-filter and -webkit-backdrop-filter (the WebKit-prefixed version required for Safari). Browser support is excellent — Chromium 76+, Firefox 103+, Safari 9+. For older browsers the element simply renders as a translucent panel without blur.

The saturation component (saturate() inside backdrop-filter) is what gives expensive macOS-style glass its vivid quality. Setting it to 180–200% increases the perceived depth of the blur by making background colours more visible through the glass.

In this tool, the live preview updates every slider value reactively through Alpine.js. The :style binding on the card element receives a concatenated CSS string that includes all six properties, so the browser re-renders the blur in real time as you drag sliders. The CSS code block mirrors the same values formatted as a ready-to-copy block.