Yesterday, Apple dropped something unexpectedly beautiful at WWDC 2025. While we were all waiting for the next AI breakthrough, Tim Cook surprised everyone with iOS 26, featuring the new „Liquid Glass“ design language. The design refresh is inspired by Apple’s VR headset, the Vision Pro, bringing translucent menus, glossy icons and rounded controls across all Apple devices.
But here’s the thing about us developers – when Apple shows us something shiny and new, we can’t help but think: „I bet I could build that with CSS.“ 🤓
So naturally, instead of waiting for iOS 26, I decided to recreate Apple’s Liquid Glass effect using nothing but HTML and CSS. No JavaScript, no complex frameworks – just good old-fashioned web magic.
What Makes Liquid Glass So Special?
Apple’s Liquid Glass uses real-time rendering and dynamically reacts to movement with specular highlights, creating an interface that feels alive and responsive. The features include shiny, reflective, and transparent visual interface elements that give the software a more „glassy“ look and feel.
The key is combining multiple CSS techniques to achieve that perfect balance of transparency, depth, and that subtle „liquid“ quality that makes everything feel premium.
Breaking Down the CSS Magic
1. The Foundation: Creating Glass
The heart of the effect lies in combining several CSS properties:
.glass {
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(2px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 2rem;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
inset 0 4px 20px rgba(255, 255, 255, 0.3);
}
Here’s what each property does:
-
backdrop-filter: blur()creates that frosted glass blur effect -
rgba()backgrounds provide semi-transparent layers -
inset box-shadowadds inner glow and depth -
border: rgba()creates subtle glass-like edges
2. The Liquid Touch: Pseudo-element Magic
The real secret sauce is in the ::after pseudo-element that creates the liquid shine:
.glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 2rem;
backdrop-filter: blur(1px);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
opacity: 0.6;
z-index: -1;
filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}
This creates those subtle highlights and reflections that make the glass appear „liquid“ – as if light is flowing across the surface.
Cross-Browser Compatibility
The effect works great on modern browsers that support backdrop-filter:
- ✅ Chrome, Firefox, Safari, Edge
- ❌ Internet Explorer (but honestly, when was the last time you worried about IE?)
For older browsers, you can provide fallback styles or use a polyfill.
Try It Yourself
Want to see it in action? I’ve put together a live demo that you can experiment with:
What’s Next?
This is just the beginning! The liquid glass effect opens up so many possibilities for modern web design. You could easily adapt this technique for:
- Navigation menus
- Modal dialogs
- Dashboard widgets
- Mobile app interfaces
- Landing page sections
The key is finding the right balance between visual appeal and usability – just like Apple did.
Wrapping Up
While we wait for iOS 26 to hit our devices, we can already start bringing some of that Apple magic to the web. Sometimes the best way to understand a new design trend is to roll up your sleeves and build it yourself.
The beauty of CSS is that it gives us the power to recreate even the most sophisticated design systems. Who knows? Maybe your next project will be the one that makes users do a double-take and wonder, „Wait, is this a native app or a website?“
🔗 Resources & References
- Live Demo
- GitHub Repository
- CodePen Example
- Glassmorphism Generator
- Background image from Unsplash
Made with ❤️ and CSS magic
What do you think about Apple’s new design direction? Are you planning to experiment with liquid glass effects in your projects? Let me know in the comments below! 👇