Free tool

CSS glassmorphism generator

Design frosted-glass UI effects visually. Adjust blur, opacity, border and shadow, preview live against a colorful backdrop, and copy production-ready CSS.

Background color

Opacity — 25%

Blur — 16px

Border radius — 16px

Border

Width — 1px

Border opacity — 30%

Box shadow

Preview

Glass Effect

This card demonstrates the glassmorphism effect with your current settings. Adjust the controls to see changes in real time.

CSS

css

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

Presets

What is CSS Glassmorphism Generator?

A glassmorphism generator is a visual design tool that creates the frosted-glass aesthetic popularized by Apple's macOS and iOS interfaces. Glassmorphism (also called frosted glass or glass UI) relies on four CSS properties working together: a semi-transparent background color using rgba(), a backdrop-filter blur that frosts whatever sits behind the element, a subtle semi-transparent border for edge definition, and optionally a soft box shadow for depth. The technique makes UI elements feel layered and translucent, giving interfaces a modern, premium look without heavy image assets. This generator lets you dial in each parameter with sliders and toggles, see the result live against a colorful gradient backdrop with overlapping shapes (so the blur effect is clearly visible), and copy clean CSS that works in all modern browsers. Everything runs client-side with zero server calls.

How to Use CSS Glassmorphism Generator

1
Set background color and opacity
Pick the base color for the glass surface using the color picker or enter a hex code. Then adjust the opacity slider from 0% (fully transparent) to 100% (fully opaque). Lower values like 15-30% give the best glass effect.
2
Adjust blur and border radius
Use the blur slider to control how much the background content is frosted. Values between 10-24px work best for most UI elements. Set the border radius to round the corners of the glass card.
3
Configure border and shadow
Toggle the border on or off. When enabled, adjust its width and opacity for that characteristic glass edge highlight. Toggle box shadow for additional depth. Finally, copy the CSS or try one of the 6 presets as a starting point.

Features

Live preview against a colorful gradient backdrop with overlapping shapes for visible frosting
Background color picker with hex input and opacity slider for precise transparency control
Blur intensity slider from 0 to 40 pixels with instant preview updates
Optional border with independent width and opacity controls for edge definition
Border radius slider up to 32px for rounded glass cards
Box shadow toggle for depth and elevation effects
Six curated presets: Frost, Smoke, Ice, Crystal, Midnight, and Aurora
Generates production-ready CSS with backdrop-filter and -webkit-backdrop-filter prefixes

Related Tools

CSS Gradient Generator

Create beautiful linear, radial and conic CSS gradients with live preview. Copy CSS or Tailwind code.

Open tool

CSS Box Shadow Generator

Build layered box shadows visually with offset, blur, spread and color controls. Copy CSS instantly.

Open tool

CSS Border Radius Generator

Design custom border-radius shapes with independent corner controls and live preview.

Open tool

CSS Flexbox Generator

Visual flexbox layout builder. Configure direction, wrap, alignment and gap with live preview.

Open tool

CSS Grid Generator

Visual CSS grid builder with rows, columns, gap and named areas. Copy CSS and HTML code.

Open tool

CSS Text Shadow Generator

Create beautiful text shadows with offset, blur and color. Multiple layers and live preview.

Open tool

See all CSS & Design tools

Frequently Asked Questions

What is glassmorphism?+

Glassmorphism is a UI design trend that creates frosted-glass surfaces. It uses a semi-transparent background combined with a backdrop blur filter to make elements look like they are made of frosted glass. The style was popularized by Apple in macOS Big Sur and iOS and has become widely used in modern web and app design for cards, modals, navigation bars, and login forms.

Which browsers support backdrop-filter?+

The backdrop-filter CSS property is supported in Chrome 76+, Edge 79+, Safari 9+ (with -webkit- prefix), Firefox 103+, and all modern mobile browsers. The generated CSS includes both the standard backdrop-filter and the -webkit-backdrop-filter prefix for Safari compatibility. For older browsers that do not support backdrop-filter, the semi-transparent background color still provides a usable fallback.

What opacity and blur values work best for glassmorphism?+

Most glassmorphism designs use a background opacity between 10% and 35% and a blur between 10px and 24px. Lower opacity with higher blur gives a more transparent, frosted look. Higher opacity with lower blur creates a more solid, subtle glass effect. The ideal values depend on your background — busier backgrounds need more blur to remain readable.

Does glassmorphism affect performance?+

The backdrop-filter blur property does use GPU resources since the browser must blur the content behind the element in real-time. For most use cases (cards, modals, headers) the impact is negligible on modern devices. Avoid applying large blur values to very large elements that cover most of the viewport, and avoid stacking multiple blurred elements on top of each other, as this can cause frame drops on lower-end devices.

How do I ensure text is readable on a glass card?+

Use white or near-white text on darker glass backgrounds, or dark text on lighter glass. The key is sufficient contrast between the text color and the effective background (the blend of the glass color and whatever is behind it). A slightly higher opacity (25-40%) and a subtle border help define the card and improve readability. Adding a soft text shadow can also improve legibility.

Can I use glassmorphism with dark mode?+

Yes, glassmorphism works well in dark mode. Use a dark base color like #1a1a2e or #0d0d2b with low opacity (20-40%) and moderate blur. The Smoke and Midnight presets in this tool are designed specifically for dark mode interfaces. Reduce border opacity to 10-15% for a more subtle edge definition in dark themes.

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

What is CSS Glassmorphism Generator?

How to Use CSS Glassmorphism Generator

Set background color and opacity

Pick the base color for the glass surface using the color picker or enter a hex code. Then adjust the opacity slider from 0% (fully transparent) to 100% (fully opaque). Lower values like 15-30% give the best glass effect.

Adjust blur and border radius

Use the blur slider to control how much the background content is frosted. Values between 10-24px work best for most UI elements. Set the border radius to round the corners of the glass card.

Configure border and shadow

Toggle the border on or off. When enabled, adjust its width and opacity for that characteristic glass edge highlight. Toggle box shadow for additional depth. Finally, copy the CSS or try one of the 6 presets as a starting point.

Features

Live preview against a colorful gradient backdrop with overlapping shapes for visible frosting

Background color picker with hex input and opacity slider for precise transparency control

Blur intensity slider from 0 to 40 pixels with instant preview updates

Optional border with independent width and opacity controls for edge definition

Border radius slider up to 32px for rounded glass cards

Box shadow toggle for depth and elevation effects

Six curated presets: Frost, Smoke, Ice, Crystal, Midnight, and Aurora

Generates production-ready CSS with backdrop-filter and -webkit-backdrop-filter prefixes

Frequently Asked Questions

What is glassmorphism?+

Which browsers support backdrop-filter?+

What opacity and blur values work best for glassmorphism?+

Does glassmorphism affect performance?+

How do I ensure text is readable on a glass card?+

Can I use glassmorphism with dark mode?+