User guide
Glassmorphism relies on backdrop-filter: blur() applied to a semi-transparent background, plus a thin light border. It needs a colorful backdrop to be visible.
- Remember the
-webkit-backdrop-filterprefix for Safari. - Transparency between 0.15 and 0.35 looks best.
FAQ
Why is my glass effect invisible?
backdrop-filter only shows when there is colorful content or an image behind the element. On a flat same-color background the effect disappears.
Is it cross-browser compatible?
Yes on recent Chrome, Edge, Firefox and Safari (with the -webkit- prefix). Provide a color fallback for older browsers.