Glassmorphism Generator
The frosted-glass look needs the right balance of blur, transparency and tint. Drag the sliders on this live preview to tune a glass card, then copy the CSS — including the -webkit-backdrop-filter line Safari needs.
Glass Card
Frosted glass effect preview
How to use
- Move the blur and opacity sliders while watching the glass card.
- Pick a tint colour and radius.
- Copy the CSS — it includes the -webkit- backdrop-filter line for Safari.
Note: Glassmorphism needs something colourful behind the element — on a plain background the effect is almost invisible, as the preview shows.
Tips
- Glassmorphism only works over a colourful background — on plain white it is nearly invisible, as the preview shows.
- Keep blur between 8 and 20 px; too little looks like a dirty overlay, too much hides the background.
- Always include the -webkit- prefixed backdrop-filter for Safari support.
- Pair it with readable text — low contrast on blurred backgrounds fails accessibility checks.