ffee All tools
EN 中文 FR DE

Glassmorphism Generator

Tune a frosted glass card and copy the glassmorphism CSS.

Build a frosted glass card

Glass card
Frosted panels blur whatever sits behind them.
Background: —
The webkit prefixed backdrop-filter is included for Safari.

How to use the Glassmorphism Generator

  1. Choose the tint colour and set how transparent the card should be.
  2. Tune the blur, border opacity, radius and shadow until the glass looks right.
  3. Copy the generated glassmorphism rule into your stylesheet.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator Modular Scale Calculator

Frequently Asked Questions

Common questions about the free online glassmorphism generator.

It is a design style that mimics frosted glass with a translucent panel, a soft blur behind it and a light border.
The backdrop-filter property with a blur value blurs whatever sits behind the element and creates the frosted effect.
Safari still needs the prefixed version of backdrop-filter, so the generated rule includes both declarations.
Modern Chrome, Edge, Safari and Firefox support it. Older browsers simply show the panel without the blur effect.
Around 10 to 25 percent opacity usually reads well. Too little and the text loses contrast against the background.
A colourful gradient or a photograph gives the blur something to work with, so the glass effect is clearly visible.
Only if the text stays readable. Check the contrast and darken the panel or add a shadow when the backdrop is busy.
Yes, the glassmorphism generator is completely free with no account, no sign-up and no tracking of any kind.

Last updated: October 10, 2026