How to make Apple's Liquid Glass Effect in HTML CSS - Featured Image
Web development1 min read

How to make Apple's Liquid Glass Effect in HTML CSS

Apple's iPhone might not be receiving a major AI enhancement, but it's definitely getting a beautiful new look. The same goes for Apple's other operating systems too.

During WWDC 2025, Apple revealed an updated user interface design called Liquid Glass. This new design includes shiny, reflective, and see-through visual elements that make the software look and feel more like actual glass.

(Image Credits: Apple)

This design update takes inspiration from Apple's VR device, the Vision Pro. It brings together the iPhone's visual style with Apple's other products, using the same interface that was created for their spatial computing headset. This change might also suggest a future where Apple's software could work on different surfaces beyond just phones, tablets, and watches.

Demo of Apple's liquid glass effect

Check out this example from CodePen of the Liquid Glass effect in HTML CSS with output. You can see how it looks and works.

More demos and resources

https://youtu.be/jGztGfRujSE
https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy
https://codepen.io/kevinbism/pen/vEOpvjw

Posted on: 12/6/2025

hassaankhan

Frontend Developer — UI/UX Enthusiast and building scalable web apps

Posted by





Subscribe to our newsletter

Join 2,000+ subscribers

Stay in the loop with everything you need to know.

We care about your data in our privacy policy

Background shadow leftBackground shadow right

Have something to share?

Write on the platform and dummy copy content

Be Part of Something Big

Shifters, a developer-first community platform, is launching soon with all the features. Don't miss out on day one access. Join the waitlist: