Glassmorphism generator — frosted glass cards in CSS

How to use the glassmorphism generator

1. Set Blur (0–40 px). Higher values hide more detail behind the card.
2. Choose the Tint colour and its Transparency (fill opacity). Lower values are clearer glass.
3. Set Saturation boost, Border opacity and Corner radius, and decide on the Soft shadow.
4. Judge the card over the colourful sample scene, then copy the .glass rule.

What it does and when to use it

Glassmorphism is a visual style where a panel looks like frosted glass: the content behind it shows through, blurred and slightly brightened, with a thin light edge. It suits floating panels over photos or gradients, such as login cards on an image background, music player controls or overlay menus.

It is not a good default for dense interfaces. Many stacked glass layers become hard to read and costly to draw. For the raw filter with every function (brightness, greyscale, sepia and more), use the backdrop filter generator. A colourful background to put behind the glass is quick to make in the CSS gradient generator.

How it works

The rule combines five parts:

.glass {
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
}

That is the default output. The tint colour is turned into rgba() with your opacity, the backdrop filter blurs and re-saturates what is behind, and the border and shadow separate the card from the scene. The shadow line appears only while Soft shadow is ticked.

MDN lists backdrop-filter as Baseline newly available since September 2024, and notes it might not work in older devices or browsers. The prefixed copy is written first for older versions that only understood -webkit-backdrop-filter.

Worked examples

Clear blue glass. Blur 20 px, tint #0ea5e9 at 10%, no saturation boost, border 20%, radius 24 px, no shadow:

background: rgba(14, 165, 233, 0.1);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);

A low fill keeps the scene visible, while the heavy blur stops details from competing with the text.

Dark smoked glass. For a dark theme, set the tint to #000000 at 40% and blur 8 px; the background becomes rgba(0, 0, 0, 0.4), ready for white text.

Limits and tips

• Blur is redrawn when content behind moves, such as during scrolling. Keep glass areas modest in size on pages meant for low-power phones.
• Contrast changes with the background. Check readable text with the contrast checker over the lightest and darkest parts of the scene.
• Nested glass inside glass blurs only what is directly behind each layer and can look muddy. One layer is usually enough.