# Glass Generator

> Free glassmorphism generator. Tune backdrop blur, saturation, tint, border and grain over colourful backgrounds, then copy the frosted-glass CSS or Tailwind classes.

Use it online: https://pixelpapa.com/tools/glass-generator

Glassmorphism uses backdrop-filter to blur and saturate whatever sits behind a translucent surface. Tune the blur, tint, border and inner highlight against several backdrops to check the effect holds up, then copy the CSS.

## Questions

### How do you make a frosted glass effect in CSS?

Give the element a semi-transparent background colour and backdrop-filter: blur(16px) saturate(160%), plus a thin light border. The blur only shows when there is colourful content behind the element.

### Is backdrop-filter supported in all browsers?

Yes. backdrop-filter works in all current versions of Chrome, Edge, Firefox and Safari. Safari still benefits from the -webkit-backdrop-filter prefix, which the generated CSS includes.