Glassmorphism CSS Generator

Make a frosted-glass panel with backdrop-filter: tint, opacity, blur, saturation, border and shadow, previewed over a colourful background, with copyable CSS.

Preview

Glass panelBlurred background, translucent fill.
CSS
background: rgb(255 255 255 / 0.18);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);

Text on glass sits over whatever is behind it, so its contrast changes as the page scrolls. Check it over the busiest part of your background, and raise the opacity or blur if it gets hard to read.

Glass

%
px
%
%
px
How is this calculated?
background: rgb(r g b / opacity); -webkit-backdrop-filter and backdrop-filter: blur(Npx) saturate(N%); border: 1px solid rgb(r g b / border opacity); border-radius; box-shadow: 0 8px 32px rgb(0 0 0 / 0.18).

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

Glassmorphism CSS Generator makes the frosted-glass panel used in many modern interfaces: a translucent, lightly tinted surface that blurs whatever is behind it, with a faint bright edge and a soft shadow. The effect comes from the backdrop-filter property, which blurs and adjusts the pixels behind an element rather than the element itself. Choose a tint colour and how transparent the fill is, how strong the blur is, how much the colours behind are saturated (a little extra saturation makes glass look richer), the border’s opacity and the corner radius, and switch the shadow on or off. The preview draws the panel over a fixed, colourful scene so the blur is obvious, and the CSS includes the -webkit- prefixed property that Safari versions before 18 still need.

How to use it
  1. Pick a preset: frosted, clear, dark glass or heavy blur.
  2. Adjust the tint, opacity, blur, saturation, border and radius.
  3. Check the panel’s text stays readable over the scene.
  4. Copy the CSS and put the panel over a colourful or photographic background.
Limits and your data
  • Glass only shows over something interesting. On a plain background the blur has nothing to blur and the panel looks flat.
  • Text contrast changes as the content behind scrolls past. Test over the busiest part, and give text a stronger fill or a shadow where needed, to meet WCAG’s 4.5:1.
  • backdrop-filter costs graphics work. Many large blurred panels, or blurring over video, can make scrolling choppy on older phones.
  • Firefox has supported backdrop-filter since version 103 (2022); very old browsers show only the translucent fill, which still works as a plain panel.
  • People who choose reduced transparency in their system settings may prefer a solid panel; the prefers-reduced-transparency media query can switch it.
  • The preview is drawn in your browser; nothing is sent.

Questions

What is glassmorphism?

A design style of translucent, blurred panels over colourful backgrounds, like frosted glass, made popular by macOS, iOS and Windows 11.

Why does my glass effect not blur anything?

Either there is nothing behind the panel to blur, or the panel has an opaque background. The fill must be partly transparent.

Do I need the -webkit- prefix?

For Safari before version 18, yes; the generator includes both lines. Put the prefixed one first.

Is glassmorphism accessible?

It can be, if text keeps enough contrast over every part of the background. A stronger tint and a little more blur make text steadier.