Glassmorphism Generator
Create frosted-glass CSS effects and copy the snippet.
About the Glassmorphism Generator
The Glassmorphism Generator creates the frosted-glass effect popular in modern interfaces, with controls for blur, transparency and tint and a live preview over a colourful background. It outputs the backdrop-filter CSS you need, including the WebKit prefix.
Frequently asked questions
The effect relies on backdrop-filter, which needs something colourful or detailed behind the element to blur. Over a plain flat background there is nothing to frost, so the effect disappears.
Support is good in current browsers, but older ones may ignore it. Always include the WebKit-prefixed version, which the generator adds, and make sure the design still reads acceptably without the blur.