Skip to content
FR

Glassmorphism CSS generator

Create a frosted glass (glassmorphism) effect in CSS: blur, transparency, saturation, border and shadow, previewed on a colorful background or your photo.

  • Free
  • No sign-up
  • No file uploaded
  • Windows, Mac, Android, iPhone

Loading the tool…

About this tool

Tune a frosted glass (glassmorphism) effect live: blur strength, glass opacity and tint, saturation, light border, corner radius and shadow. Preview it on colorful backgrounds or your own photo; the CSS code includes the Safari version.

When to use it

Cards and interface panels

A frosted card on a colorful background looks modern and airy, widely used for dashboards and landing pages.

Transparent navigation bar

A glass menu bar lets the scrolling content show through while staying readable.

Modal windows

Blurring the background focuses attention on the dialog without fully cutting the visitor off from the page.

How to use

  1. Choose a colorful background or your own photo.
  2. Set the glass blur, opacity, tint and border.
  3. Copy the card's CSS code.

How it works

The code combines a semi-transparent rgba() background, backdrop-filter with blur() and optionally saturate(), a translucent white border that mimics the glass edge, a corner radius and a soft shadow.

The preview is rendered by your browser with exactly the same code: what you see is what your visitors will see. Your background photo stays on your device.

Tips for best results

  • The effect only shows on a contrasted background: colored shapes, a gradient or a photo.
  • A 10 to 16 px blur and 15 to 25% opacity give the most classic look.
  • Check text readability on the card: increase the opacity on busy backgrounds.
  • Saturation above 100% makes colors seen through the glass more vivid.

Common problems and fixes

The blur doesn't show

backdrop-filter only works if the element's background is transparent or semi-transparent and there is something behind it.

It works everywhere except Safari

Make sure the -webkit-backdrop-filter line is present: Safari needs it.

The text is hard to read

Increase the background opacity, add a text shadow or choose a calmer background.

Frequently asked questions

What is glassmorphism?

An interface style where panels look like frosted glass: semi-transparent, they blur whatever is behind them. It was popularized by macOS Big Sur and Windows 11.

Which CSS property creates the effect?

backdrop-filter: blur() blurs the background behind the element. It is used with a semi-transparent background, otherwise the blur is invisible.

Does it work in Safari?

Yes, with the -webkit-backdrop-filter prefix, already included in the generated code. All recent browsers support the effect.

Does the effect slow the page down?

The blur is computed by the graphics card. On a few elements it's unnoticeable; avoid it on very large animated areas.

Related searches

Still stuck?

Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.