DEV Community

Cover image for Liquid Glass CSS: Apple-Style Frosted Glass Effects
jQueryScript
jQueryScript

Posted on

Liquid Glass CSS: Apple-Style Frosted Glass Effects

Liquid Glass CSS: a vanilla JavaScript library that applies Apple-style frosted glass effects to any HTML element.

Key features:

→ Zero dependencies — one script tag

→ SVG displacement filters for organic distortion

→ Dynamic color tinting based on background sections

→ Utility classes for blur intensity (0–10px)

→ Light mode variant for bright UIs

Perfect for hero overlays, sticky navs, and modal dialogs.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)