CSS Glassmorphism Generator

About the CSS Glassmorphism Generator

Glassmorphism is a UI style that imitates frosted glass: a semi-transparent panel that blurs whatever is behind it, with a subtle light border. It became popular through Apple's macOS and iOS and Microsoft's Fluent design, and it looks great over colorful backgrounds and images.

The CSS Glassmorphism Generator produces the exact CSS you need using backdrop-filter for the blur, an RGBA background for transparency, a translucent border and a soft shadow. Adjust each property while watching the effect over a colorful sample background. The code includes the -webkit- prefix for Safari support.

Making a glass card that looks good and stays readable

A typical frosted-glass card needs four ingredients:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

Why the effect sometimes does not show

• There is nothing behind it to blur. Glass only looks like glass over a colourful image, a gradient or shapes. On a plain white page it just looks grey.
• The background is fully opaque. If the alpha value is 1, the blur behind cannot be seen.
• A parent hides it. Some properties on parent elements, such as certain overflow or filter settings, can stop the backdrop from showing.

Keep text readable

Busy backgrounds make text on glass hard to read. Increase the blur, make the panel slightly more opaque, or use a darker glass with white text. Check the result with the Color Contrast Checker using the darkest and lightest areas behind the card.

Use glass for a few highlight elements, such as a login box or a pricing card, rather than every panel on the page. Each blurred layer costs the browser extra work.

How to use the CSS Glassmorphism Generator

1. Adjust blur, transparency and saturation.
2. Set the border opacity, radius and glass color.
3. Watch the glass card update over the colorful background.
4. Copy the CSS and apply it to your element.

Frequently asked questions