Glassmorphism generator
Dial in blur, opacity, saturation and border, then read the frosted glass effect over a live gradient backdrop. Copy the full CSS, webkit prefix included, when it looks right.
The anatomy of a glass surface
A convincing glass panel is really four ingredients working together. A semi transparent fill lets the background show through. A backdrop blur softens whatever is behind it. A gentle saturation boost makes the blurred colors feel richer, like real glass. And a thin bright border catches the light at the edge, which sells the illusion of a physical pane.
Get any one of these wrong and the effect collapses. Too much fill opacity and it stops looking like glass. No border and it looks like a plain blur. HueKit exposes all four so you can balance them by eye.
Using glassmorphism without hurting readability
Glass is beautiful but it fights legibility, because text sits over a busy, blurred backdrop. A few habits keep it accessible:
- Keep enough fill opacity that text stays readable over any backdrop.
- Use a strong, high contrast text color and confirm it in the checker.
- Reserve glass for cards and navigation, not long body copy.
Once you have a card you like, run your text color against the fill in the contrast checker to make sure it clears WCAG AA.
Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI style where a panel looks like frosted glass. It blurs whatever sits behind it, adds a light translucent fill and a thin bright border, so the surface feels layered above the background.
How does backdrop-filter work?
The backdrop-filter property applies effects like blur and saturate to the area behind an element, not the element itself. Combined with a semi transparent background, that is what creates the frosted look.
Does glassmorphism work in every browser?
Modern browsers support backdrop-filter, and HueKit includes the -webkit- prefix for wider coverage. Always provide a solid fallback background for browsers that do not support it.
Why does my glass card look flat?
Glass only reads as glass when there is something interesting behind it. Place the card over an image or a colorful gradient, and make sure the fill opacity is low enough to let the backdrop show through.