CSS Glassmorphism Generator

This tool builds a CSS frosted-glass (glassmorphism) effect by combining a semi-transparent background with backdrop-filter: blur() — drag the sliders over the colorful preview to see the glass card blur whatever is behind it, then copy the CSS. It also outputs the -webkit-backdrop-filter prefix Safari needs, since backdrop-filter still requires it there.

What Is This Tool?

Glassmorphism is a UI style where an element looks like frosted glass: a semi-transparent background lets colors behind it show through, while backdrop-filter: blur() blurs that background so it reads as glass rather than a plain transparent panel. A thin, semi-transparent border and rounded corners usually finish the look.

This tool lets you build that effect visually. The preview sits over a moving gradient background specifically so the blur is visible — glassmorphism only reads correctly over something with color or detail behind it, not a flat white page. Adjust the background color's opacity, the blur strength, the border's opacity, and the corner radius, then copy the generated CSS.

Source: Filter Effects Module Level 1, W3C — defines backdrop-filter, the property this effect is built on.

Why Use It?

Live preview over a colorful animated backdrop, so you can actually see the frosted-glass effect instead of guessing at blur values against a blank background.
Full control over background opacity, backdrop blur strength, border opacity and border-radius in one place.
Outputs both backdrop-filter and the -webkit-backdrop-filter prefix automatically, so you don't forget Safari support.
Runs entirely in your browser — nothing you configure is uploaded anywhere.
Free, no signup, works on mobile.

How to Use

Pick a background color and adjust its opacity — lower opacity (10–25%) reads as glass; higher opacity looks more like a solid tinted panel.
Increase blur strength to blur what's behind the element — this is what actually creates the frosted-glass look, distinct from the transparency itself.
Adjust border opacity to add a subtle light edge, which helps the glass card read as a distinct surface rather than blending into the background.
Set the border-radius for rounded corners — glassmorphism cards are almost always rounded, rarely sharp-cornered.
Copy the generated CSS and paste it into your stylesheet. Remember the element needs something with color or texture behind it — glassmorphism is invisible over a flat, single-color background.

Example

Input

Background: white at 20% opacity · Blur: 10px · Border opacity: 30% · Radius: 16px

Output

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

A classic frosted-glass card style used in login panels, navigation bars and dashboard widgets over a colorful or photo background.

Safari and browser support

backdrop-filter is supported in current Chrome, Firefox, Edge and Safari, but Safari has historically required the -webkit-backdrop-filter prefix alongside the unprefixed property to render the blur — without it, older Safari versions silently ignore the blur and only show the flat transparent background. This tool always outputs both declarations for that reason.

See MDN's backdrop-filter documentation for current browser compatibility details: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Why glassmorphism needs something behind it

backdrop-filter only blurs whatever is visually behind the element — a background image, a gradient, another colored element, or content scrolling underneath. Over a plain white or single-color background there's nothing to blur, so the effect is invisible and the element just looks like a slightly tinted, rounded box. Always place glassmorphism elements over a gradient, photo, or otherwise busy background for the effect to read.

Pairing with other CSS effects

Glassmorphism cards commonly combine a subtle box-shadow underneath for extra depth. Generate the frosted-glass CSS here, then add a soft shadow with the Box Shadow Generator and apply both declarations to the same element.

→ Box Shadow Generator · Border Radius Generator

Frequently Asked Questions

Why doesn't the glass effect show up on my page?

backdrop-filter blurs whatever is behind the element. If your element sits over a plain white or solid-color background, there's nothing visually interesting to blur, so it just looks like a faint tinted box. Place it over a gradient, image, or other detailed background for the frosted-glass effect to be visible.

Do I need the -webkit-backdrop-filter prefix?

Yes, if you want the effect to render reliably in Safari. This tool always outputs both the standard backdrop-filter and the -webkit- prefixed version together, since Safari has historically needed the prefix to apply the blur.

What's the difference between background opacity and blur?

Background opacity controls how much of your chosen tint color shows versus how much of what's behind shows through unaltered. Blur controls how much that visible background is smeared/softened. Glassmorphism uses both together — some transparency plus some blur — rather than either alone.

Can I use backdrop-filter on any element?

Yes, but it only affects what's visually behind that element within the page's rendering, not the element's own children. It also has a performance cost on some devices when applied to many elements or animated frequently, so it's best used for a small number of prominent UI surfaces like cards, modals or navigation bars rather than dozens of small elements.

Why is my border barely visible?

The border in this tool uses a semi-transparent white, which is meant to be subtle — a light edge that helps the glass panel read as a distinct surface without looking like a hard, opaque outline. Raise the border opacity slider if you want a more visible edge.