Liquid glass effect in the browser: refraction with CSS and SVG

September 9, 2025

Chris Feiho experiments with SVG filters to recreate a controversial yet striking “liquid glass” look inspired by upcoming versions of iOS and macOS.

May 21
State of CSS 2026
Annual CSS survey now open, focused on the features that matter most.
May 11
How to control infinite CSS animations
Speed up, slow down, and reverse animations with animation-composition and CSS variables.
May 7
Using safe-area-inset to build mobile-safe layouts
How to keep notches, cutouts, and home indicators from overlapping your UI.
May 6
What’s new in Chrome 148
Name-only container queries, at-rule() in @supports, lazy <video> and <audio>, Prompt API, and more.
May 5
Media queries range syntax
How CSS comparison operators replace overlapping min-width and max-width breakpoints.
May 4
Design token naming conventions: a practical guide
A practical guide to scalable token names across teams and products.
May 1
SVG from scratch
Carmen Ansio presents SVG not as a file format but as a DOM you can style and script.
April 29
Scroll-driven animations
Josh Comeau dives into CSS animation-timeline and maps keyframes over scroll distance.