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! 👇
Top comments (9)
Backdrop blur is not liquid glass effect. You lack the main ingredient - background distortion.
Check this out - codepen.io/chakachuk/pen/QwbaYGO
That project is amazing! I've seen a few others that do a great job replicating that effect. I actually tried to recreate it using only CSS. I was aware of the distortion and did everything I could to get something similar, but I couldn’t find any CSS properties that achieve the same result.
Hopefully, in the near future, new properties will come out that make it possible with just a few lines of code. For now, thanks for sharing! 😉
Yes, at the moment, the only way to achieve distortion is by using custom CSS SVG filters. However, the main drawback is that mobile Safari—and even Chrome—don’t seem to support it, despite caniuse.com indicating that they do (likely due to a WebKit bug). Hopefully, we’ll see a built-in CSS filter for distortion in the future, similar to how we currently have blur and brightness, especially if Apple’s liquid glass design becomes more consistent and widely adopted.
Pretty cool, but it definitely makes things harder to read, especially the colour contrast. Note this comment on the CSSWG issues site, (github.com/w3c/csswg-drafts/issues...) where it's made clear that at least by the time it ships, Apple will include mechanisms to increase the contrast to meet accessibility norms.
That's true. I had problems replicating the design because I couldn't find a good compromise between the opacity of the "glass" and the contrast with the white writing. I hope that some guide lines will come out.
Just watched the keynote and Liquid Glass is a nice step forward. Feels like Apple finally brought some life back into the UI. Looks clean, especially on iPad and Vision Pro, but the contrast issues are real. Some of it leans more aesthetic than usable.
The on-device foundation models are the most exciting part of Apple Intelligence. Local and privacy-focused makes sense for them. Siri still feels a bit behind though, more of a rebrand than a real upgrade.
Many users have commented on this contrast issue. For now, it’s still in beta, and it's likely that many of the problems being experienced now won’t be present in the official release.
That said, I also agree that Apple has focused more on this graphical update than on Apple Intelligence integration or adding more functionality to Siri. Let’s see what happens during the presentation of the next iPhone.
What you made is not something new. You can see in apples liquid glass design the lights actually bend like in a real glass. Along the borders. But in your case it just a blur
At the moment, unfortunately, it's not possible to fully replicate the distortion using just CSS. There are other projects that manage to reproduce Apple’s effect quite well — there's an amazing one in the comments — but they have very limited support on some browsers. I tried to get as close as possible while keeping broad browser support.
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more