Apple recently introduced “Liquid Glass” as part of its new UI design language. It’s a translucent visual style that reflects and refracts its surroundings and adapts to light and content behind it. Since it’s been all over my feed, I wanted to see how close I could get to the effect using just CSS.
No images, no JavaScript frameworks, no canvas tricks. Just a clean CSS-based implementation using two core properties:
- mix-blend-mode: difference for automatic contrast
- backdrop-filter: blur for that frosted-glass depth
Together, they let text and UI elements stay legible on any background without explicitly setting color logic. I also added a draggable button with a subtle jiggle to hint that it’s interactive.
This isn’t a one-to-one recreation, but it captures the spirit of what Apple’s going for in a way that’s simple and performance friendly for the web.
Top comments (0)