Liquid Blur is a glass material for the web. Plain CSS classes, one optional script, and no refraction — just a calm, blurred surface built from what every browser renders the same way. Light and dark, springy to the touch, and polite to people who'd rather it stepped aside.
MIT · 14.5 KB of CSS · no dependencies
Listen Now
Recently Played
Top Songs
- Surface Tension
Lumen3:42 - Frosted
Vela4:05 - Refraction (Not Included)
Paper Kites2:58 - Backdrop
Mira Sol3:21 - Saturate
Coral3:47
It's live: press the glass, drag it.
Tune it by hand. Two numbers carry the material: transparency and depth. Pick a backdrop, press the glass, let the two buttons melt into one, and take the markup with you.
Surface Tension — Lumen. Backdrop blur, a fill, rims and a little light.
Three lines to glass. Install the package, import the stylesheet once, and putlb on anything.
1 Install
pnpm add liquid-blur2 Import the stylesheet
import "liquid-blur/liquid-blur.css";3 Add the class
<button class="lb">Glass</button>- ClassesSeven of them: the material, its character, and how it answers a touch.
- CustomizeOne inherited knob per idea — transparency, depth, colors, springs.
- ThemingLight and dark from one number, wired to any theme switch you have.
- TailwindCascade layers that let your utilities win, in one line.
- AccessibilityEvery system setting that asks for less glass, honored.
- APIinstallLiquidBlur and the spring that powers the presses.
Glass for the web, in 14.5 KB of CSS. Free and open source, under the MIT license.