Glassmorphism generator (frosted glass)
Design frosted-glass cards and panels and see the result instantly on different backgrounds. The generated CSS includes the -webkit- prefix Safari still needs.
Processed 100% in your browser
The background is blurred behind this card. Tweak the controls and copy the CSS.
Ctrl + Enter runCtrl + C copy result
How to use
- 1Choose the glass color (white for dark backgrounds, black for light ones).
- 2Adjust transparency, blur and saturation until you get the effect you want.
- 3Add an outline and shadow to separate the glass from the background, and try other backgrounds.
- 4Copy the CSS or share a link to your settings.
Use cases
- Modern cards, modals and navigation bars.
- Panels over photos or videos without losing readability.
- Interfaces inspired by macOS, iOS or Windows 11.
- Quick prototypes to show clients.
Frequently asked questions
What is glassmorphism?
A visual style that mimics frosted glass: a semi-transparent panel that blurs whatever is behind it using the CSS backdrop-filter property, usually with a thin outline and a soft shadow.
Does it work in all browsers?
backdrop-filter works in current Chrome, Edge, Firefox and Safari. Safari still needs the -webkit-backdrop-filter prefix, which the CSS already includes.
Why can’t I see the effect on my site?
The blur only shows when there is detailed or colorful content behind the element (an image, a gradient or shapes). On a flat background the glass just looks like a semi-transparent color.
Does it affect performance?
backdrop-filter uses the GPU. Apply it to a few elements and avoid very large blurs over huge areas, especially on low-end phones.