Apple's "Liquid Glass" redesign broke the internet's design brain a bit, and now everyone wants that frosted, light-catching glass look on their own UI. Problem: getting it to actually look good — not muddy, not invisible — means fighting with blur, opacity, borders, and shadows all at once until it clicks. It usually doesn't click on the first ten tries.
So this is a nice find: Aether CSS — a free generator that does the tuning for you. Drag some sliders, watch it update live, copy the CSS, done.
Features
- 🪟 Liquid glass (the Apple-style effect, distortion included)
- 🧊 Classic glassmorphism (frosted panel, blur, soft border)
- 🌑 Neumorphism (the soft "pressed into the surface" look)
- 🎨 A styleguide generator (typography, color, form styles)
- 📊 A table CSS generator
Tune it and copy the code straight into whatever you're building, vibe-coded or hand-written.
Here's roughly what you're generating instead of hand-tuning yourself:
.glass-panel {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 8px 24px rgba(0, 0, 0, 0.2);
}
Five properties, all leaning on each other — which is exactly why doing this by eye takes forever and a live-preview tool doesn't.
One real caveat before you ship it everywhere: backdrop-filter isn't free — a page full of stacked glass panels can genuinely tank frame rate on weaker devices. Use it where it earns its keep, not on every card on the page.
If glass or neumorphic UI is your thing at all, bookmark this one. What's your go-to tool for this kind of UI polish? drop it below, always looking for more.
At ArtClick, we build fast, scalable WordPress websites, company websites and custom web systems that balance design, performance and long-term maintainability. Whether you're starting from scratch or improving an existing platform, we'd love to help.
Top comments (0)