Frosted glass with backdrop-filter
Glassmorphism uses a semi-transparent surface with backdrop-filter: blur() so the content behind it shows through softly. A subtle light border and a shadow make the panel read as a physical layer. This builder lets you tune each part over vivid scenes, so you can judge legibility before you ship.
How to use it
- Choose a background scene similar to where the panel will sit.
- Adjust blur, saturation, tint and opacity until text stays readable, then refine the edge and corner radius.
- Copy the CSS, which already includes the -webkit- prefix for Safari.
Frequently asked questions
Which browsers support backdrop-filter?
Current versions of Chrome, Edge, Firefox and Safari all support it. Safari also needs the -webkit-backdrop-filter prefix, which the generated CSS includes.
How do I keep text readable on glass?
Raise the tint opacity, add more blur and use a slightly heavier font weight. Always check the panel over the busiest part of your background.