TLDR Web Dev · ARTICLES & TUTORIALS

LIQUID GLASS, BUT IN CSS

atlaspuplabs.com12 min read

Summary from the TLDR Web Dev newsletter

This article explains how to recreate Apple's new “Liquid Glass” design language from WWDC25 using CSS and SVG filters. The effect can be broken down into layers with box-shadows, backdrop-filter blur, color adjustments, and complex SVG displacement maps for refraction simulation. However, the implementation shown only works in Chrome, requires a lot of GPU resources, and is only practical for hero elements rather than full UI due to performance constraints.