What is glassmorphism?

A UI style using translucent, blurred “frosted glass” surfaces with a subtle border and shadow.

Which CSS property creates the blur?

backdrop-filter: blur(), combined with a semi-transparent background.

Does backdrop-filter work everywhere?

Most modern browsers support it; a fallback background is recommended.

Is anything uploaded?

No. The frosted-glass CSS preview is rendered entirely in your browser, so your color and blur choices stay on your device and the tool works offline.

Why do I need the -webkit-backdrop-filter prefix?

Safari on macOS and iOS requires the -webkit- prefixed property to apply backdrop blur. Including both backdrop-filter and -webkit-backdrop-filter ensures the frosted effect works in Safari as well as Chrome, Edge and recent Firefox.

How do I keep text on a glass card readable?

Give the card enough background opacity (around 15–30%) so text meets WCAG AA contrast against the busy backdrop, and avoid placing small body text over high-contrast areas. Glass works best for accent cards and modals, not dense text UI.

What blur and opacity values give a convincing glass look?

A backdrop blur of about 8–16px with a background opacity of 10–30% reads as frosted glass for most cards. Add a subtle low-opacity light border (15–40%) to mimic the refracted edge and a soft shadow for depth.

Glassmorphism Generator

Tune blur, transparency, and color to design a frosted-glass card, preview it live, and copy the backdrop-filter CSS — in your browser.

Updated June 2026

Files never leave your browser

Preview Background

Blur: 12px

Background opacity: 20%

Background color

Border radius: 16px

Border opacity: 30%

Border width: 1px

Shadow blur: 32px

Shadow opacity: 20%

Glass Card

Frosted glass effect

CSS Output

background: rgba(255, 255, 255, 0.20);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);

How to use Glassmorphism Generator

Generate frosted-glass (glassmorphism) CSS with real-time controls for backdrop blur, background transparency, color, border opacity, border width, border radius, and drop shadow. Preview the glass card over four sample gradient backgrounds. Copy the complete CSS including the -webkit-backdrop-filter fallback for maximum browser compatibility.

Choose a preview background gradient to see the glass effect over a colorful scene.
Drag the Blur slider to set the backdrop-filter blur intensity — 8–16px is typical for UI cards.
Adjust Background Opacity to control transparency — 10–30% creates a convincing glass look.
Pick a Background Color — white (#ffffff) is standard; tinted glass uses brand colors at low opacity.
Set Border Opacity and Width for the subtle frosted-edge highlight typical of glassmorphism.
Adjust Border Radius to round the card corners to your design.
Tune Shadow Blur and Shadow Opacity for depth beneath the glass card.
Copy the CSS output — it includes both backdrop-filter and -webkit-backdrop-filter.

Your data never leaves your device — 100% private processing.

backdrop-filter and browser support

The backdrop-filter CSS property applies visual effects (blur, brightness, contrast, etc.) to the area behind an element — making content behind the element visible but visually processed. Unlike filter, which affects the element itself, backdrop-filter affects what is beneath it. The -webkit-backdrop-filter prefix is required for Safari on macOS and iOS, where it has been supported since Safari 9 (2015). Chrome and Edge support unprefixed backdrop-filter since 2019 (Chrome 76). Firefox added support in 2022 (Firefox 103). For older Firefox, a semi-transparent background-color fallback ensures the text remains readable even when the blur effect is unsupported.

Browser	backdrop-filter support	-webkit- needed?
Chrome / Edge 76+	Yes	No
Safari (all versions)	Yes	Yes
Firefox 103+	Yes	No
Firefox < 103	No	No (falls back to bg-color)
iOS Safari 9+	Yes	Yes

Glassmorphism design principles

Effective glassmorphism requires four elements working together: a blurred, semi-transparent background that reveals depth; a subtle white or light-colored border at low opacity (15–40%) that simulates the refracted edge of real glass; a soft drop shadow for elevation; and a colorful background scene — gradients, images, or patterns — visible through the glass. The glass card should have enough background opacity (typically 15–30%) that text on it meets WCAG AA contrast requirements. Avoid using glassmorphism for primary navigation or dense text UI — it works best for accent cards, modals, and hero overlays.

Worked examples

Frosted glass card

Inputs: blur 12px · white 20% · border 30%

Result: backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.2)

Tinted glass

Inputs: blur 10px · indigo 15%

Result: background: rgba(99, 102, 241, 0.15) with a 10px backdrop blur

Glossary

backdrop-filter: A CSS property that applies graphical effects (blur, brightness, etc.) to the area behind an element, not the element itself.
Glassmorphism: A UI design trend using frosted-glass-like translucent surfaces with backdrop blur, subtle borders, and semi-transparent backgrounds.
-webkit-backdrop-filter: The vendor-prefixed version of backdrop-filter required for Safari and older WebKit browsers.
rgba(): A CSS color function with a fourth alpha parameter for transparency: rgba(red, green, blue, alpha) where alpha is 0–1.
Frosted glass effect: A visual style where a blurred translucent surface partially obscures the content behind it, mimicking etched or frosted glass.

Frequently Asked Questions

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Why use Glassmorphism Generator?

Generates both backdrop-filter and -webkit-backdrop-filter in one output for full Safari support
Four preview gradient backgrounds let you validate glass legibility before committing to CSS
Border opacity slider replicates the subtle refracted-edge highlight characteristic of real glass
Background color and opacity controls help ensure text on the glass card can meet WCAG AA contrast

Common use cases

Building a frosted-glass hero card for a SaaS landing page over a colorful gradient background
Creating a translucent navigation bar that blurs page content as the user scrolls beneath it
Designing a modal overlay with glassmorphism to reduce visual weight compared to a solid backdrop
Testing tinted glass (rose, indigo) against multiple gradient backgrounds before writing any CSS
Tuning backdrop-filter blur intensity on a product card to balance aesthetics with mobile performance

Related Color & Design

CSS Box Shadow Generator

Design CSS box-shadows visually with a live preview and copy the code. Layer multiple shadows, set blur, spread, and color. Free and private.

CSS Border Radius Generator

Create rounded corners visually and copy the CSS. Control each corner independently for buttons, cards, and blobs. Free and private.

CSS Gradient Generator

Free CSS gradient generator — design linear, radial, and conic gradients with a live preview and copy production-ready CSS instantly. No sign-up.

Color Picker & Converter

Free online color picker — grab any color and convert between HEX, RGB, HSL, HSB, and CMYK, plus instant tints, shades, and palette ideas. No sign-up.

Color Contrast Checker

Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.

Color Palette Generator

Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.

Explore all Color & Design.