About glassmorphism
Glassmorphism is the frosted-glass UI style — a translucent, blurred panel that lets the background show through. This generator lets you tune the blur, transparency, tint colour, border and radius with a live preview over a colourful background, then copy the CSS (including the all-important backdrop-filter). It runs entirely in your browser.
How Glassmorphism works
How to create the glass effect
- Adjust the blur and transparency to taste.
- Pick a tint colour and set the border strength and radius.
- Copy the CSS — the key is
backdrop-filter: blur()with a semi-transparent background.
Why backdrop-filter matters
The frosted look comes from backdrop-filter, which blurs whatever is behind the element. A subtle light border and soft shadow complete the effect. Glassmorphism looks best over a vivid, colourful or photographic background.
Browser support
The generated CSS includes the -webkit- prefix for Safari. Older browsers that do not support backdrop-filter will simply show the translucent background without the blur.
Common uses
- Design frosted-glass cards
- Create modern modal and overlay panels
- Style navigation bars over images
- Build login and pricing cards
- Add depth to hero sections
- Match the iOS/macOS glass aesthetic
- Layer UI over colourful backgrounds
- Copy ready-made glass CSS
Frequently asked questions
How do I create a glassmorphism effect?
Use a semi-transparent background with backdrop-filter: blur(). This tool builds it visually and gives you the code.
What is backdrop-filter?
A CSS property that applies effects (like blur) to the area behind an element, creating the frosted-glass look.
Does it work in all browsers?
Modern browsers support it; the CSS includes the -webkit- prefix for Safari. Old browsers show the background without blur.
Why does the glass look best over images?
The blur needs something behind it to frost — a colourful or photographic background makes the effect pop.
Is anything uploaded?
No — it runs entirely in your browser.
Can I change the tint colour?
Yes — pick any tint and adjust its transparency.
Will it slow down my page?
Heavy blur can be GPU-intensive on large areas, but typical card-sized panels perform well.
Is it free?
Yes — completely free with no sign-up.