Skip to content
Convertto

Glassmorphism CSS Generator

Create frosted-glass CSS with backdrop blur, transparency and a subtle border.

To create a glassmorphism effect, adjust the blur, opacity and saturation and the frosted panel updates live over a colourful backdrop. The effect relies on backdrop-filter, which blurs whatever sits behind the element — so it only looks like glass over varied content.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does my glass effect look like a flat panel?

backdrop-filter blurs what is behind the element. Over a solid background there is nothing to blur, so it reads as plain translucency. It needs an image, gradient or content behind it to work.

Is backdrop-filter well supported?

Yes in every current browser, though Safari still needs the -webkit- prefix, which is included in the generated CSS. Older browsers simply show the semi-transparent background without blur, which degrades acceptably.

How to use the glassmorphism css generator

  1. 1Set the backdrop blur.
  2. 2Set the background opacity.
  3. 3Set the saturation boost.
  4. 4Set the border opacity.
  5. 5Set the corner radius.
  6. 6Pick the tint colour.
  7. 7The result appears immediately — copy or download it.

Embed this tool

Put the working glassmorphism css generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Gradient GeneratorBuild linear, radial and conic CSS gradients and copy the code.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.CSS Text Shadow GeneratorDesign text shadows, outlines and glow effects with a live preview.

Last updated

More css generators