CSS Glassmorphism Generator

What it does

The CSS Glassmorphism Generator turns a color picker and four sliders into a ready-to-paste "frosted glass" CSS block. Glassmorphism is a popular UI design trend — first popularized by macOS's frosted panels and later by Windows Fluent Design and countless dashboard/card UIs — where a translucent panel sits over a colorful or busy background, blurred just enough to hint at what's behind it while staying readable. The look comes from stacking a handful of CSS properties: a semi-transparent rgba() background, a backdrop-filter blur, a soft light border, a rounded corner radius, and a subtle drop shadow for lift.

The properties it generates

background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);

• background — your chosen color combined with the Background Opacity slider into an rgba() value. Lower opacity lets more of whatever sits behind the panel show through.
• backdrop-filter / -webkit-backdrop-filter — the actual blur that makes the effect read as "glass." Both lines are always emitted together; see the browser support note below.
• border — a fixed 1px white border, tinted by the Border Opacity slider. A faint light edge is what sells the "pane of glass catching light" look; a solid border reads as a flat card instead.
• border-radius — rounded corners from the Border Radius slider. Glass panels are almost always rounded rather than sharp-cornered.
• box-shadow — a fixed, subtle shadow that lifts the panel off the page without competing with the blur.

Browser support note

backdrop-filter is well supported in modern Chrome, Edge and Firefox, but Safari has historically required the -webkit-backdrop-filter prefix to render the blur at all — which is why the generated CSS always includes both declarations. If you drop the -webkit- line, Safari users may see a flat translucent panel with no blur instead of the frosted-glass effect. Also note: backdrop-filter blurs whatever is behind the element, so the effect is invisible unless the element is layered over something with texture or color — a plain white page background won't show it.

How to use it

1. Pick a Background Color and set Background Opacity — together these become the panel's translucent rgba() fill.
2. Drag Blur (px) to control how frosted the glass looks; higher values blur the background behind the panel more heavily.
3. Set Border Radius for how rounded the panel's corners are.
4. Adjust Border Opacity to make the panel's faint white edge more or less visible.
5. Copy the generated CSS block and apply it to any positioned element that sits over an image, gradient or other elements.

FAQ

Why is the border always white? A light, semi-transparent border is the near-universal convention for glassmorphism — it mimics the way real glass catches light at its edges, regardless of the panel's own tint. If you need a differently colored border, swap the rgba(255, 255, 255, …) in the output for your own color.

Why doesn't the blur show up on my element? backdrop-filter only blurs content that's already rendered behind the element — it needs something with detail (an image, gradient, or other UI) underneath, and the element itself needs a transparent or translucent background so that content shows through. A fully opaque background defeats the effect entirely.

Can I use a dark background color for a "dark glass" look? Yes — pick a dark hex color (e.g. #000000) and a low-to-moderate opacity; the border stays white for contrast against the dark, blurred backdrop, which is the standard dark-mode glassmorphism treatment.

Does this tool store or upload anything? No. All calculations run locally in your browser — your color and slider values never leave your device.