Glassmorphism Design: Make Frosted Glass UI That's Still Readable
Frosted glass panels look premium, until nobody can read them. Play with the sliders, copy the CSS and learn the 5 rules that keep glass legible.
Glassmorphism is a UI style where panels look like frosted glass: semi-transparent, blurred and edged with a thin light border. It stays readable when you follow five rules, and the live playground below lets you test them.
Glassmorphism is a UI style where panels look like frosted glass: semi-transparent, blurring whatever is behind them, with a thin light edge that catches the light.
Play with it
Drag the sliders. Switch to the busy backdrop and watch readability drop. Copy the CSS when it looks right.
Where it came from
- 2007 Windows Vista ships Aero Glass: translucent, blurred window frames.
- 2013 iOS 7 replaces textures with frosted blur panels. Flat design gets depth back.
- 2020 Designer Michal Malewicz coins "glassmorphism". macOS Big Sur goes all in.
- 2025 Apple's Liquid Glass puts glass at the centre of its whole design language.
The 5 rules
1. Glass needs something behind it
On a plain white page, glass is just a grey box. Put colour, gradients or shapes behind it.
2. Blur enough to calm the background
Around 12 to 24px of blur is the sweet spot. Less, and the background fights your text.
3. Add a light edge
A 1px semi-white border sells the "glass" and separates the panel from the background.
4. Tint it slightly
A 10 to 25% white (or black, on dark UIs) fill keeps text readable even when the blur isn't enough.
5. One layer of glass
Glass on glass on glass turns to mush. Use it for one layer: cards, a nav bar or a modal.
Do vs don't
Use glass for floating elements over rich backgrounds: dashboard cards, nav bars, media controls.
Put long paragraphs or small grey text on glass. Keep text short, bold and high contrast.
5 places doing it well
- Apple's Human Interface Guidelines: Materials: the source. Shows how blur strength changes with what's behind it.
- Microsoft Fluent: Acrylic: Windows' take, with clear rules for when to use it.
- css.glass: a quick generator to sanity-check your values.
- ui.glass generator: another generator with good presets.
- Dribbble: glassmorphism: endless inspiration. Check which shots would still be readable in a real app.
When to use it for a client
Use it when the brand wants to feel modern and premium: fintech dashboards, SaaS landing pages, music and media apps, product launches.
Skip it when the content is text-heavy, the audience includes low-vision users you can't test with, or the site must run fast on old phones. Blur is expensive to render.
What this means for your product
Glass suits dashboards, nav bars and media controls, not long reading. Choosing where it fits is part of UI/UX design at pSkyro Labs. More in the series: brutalism and pixel art.
Try it yourself
Glass is a finish, not a foundation. Get the content readable first, then frost it.
FAQ
What is glassmorphism?
Glassmorphism is a UI style where panels look like frosted glass: semi-transparent, blurring whatever sits behind them, with a thin light border. It is built in CSS with backdrop-filter: blur().
How do you make glassmorphism in CSS?
Give the element a semi-transparent background such as rgba(255,255,255,.18), add backdrop-filter: blur(16px) (plus -webkit-backdrop-filter for Safari), a 1px light border and rounded corners. Place it over a colourful background.
Is glassmorphism bad for accessibility?
It can be. Low blur and low opacity over busy backgrounds make text hard to read. Use enough blur and tint, keep text short and bold, and check contrast before shipping.
Does backdrop-filter work in all browsers?
It works in all current major browsers. Keep the -webkit- prefix for older Safari, and give the panel a solid enough background that it still reads if the blur is unsupported.