Liquid glass template
Glass that
bends the light.
A glassmorphism starter with real depth — frosted blur, a liquid displacement warp, specular highlights, and colored shadow. Drop in your words and ship.
◇
Real refraction
An SVG displacement filter warps whatever's behind the glass — not a flat blur.
✦
Specular light
A soft highlight rides the top edge so every panel reads as polished, wet glass.
❖
Colored depth
Tinted shadows lift each surface off the vivid backdrop with believable depth.
Showcase
Panels, cards, and controls.
Frosted card
Blur, saturate, and a bright inner edge. The workhorse surface.
Pill controls
Rounded glass buttons with a glow on hover.
OneTwo
Wide panel
The same material scales to hero panels, nav bars, and modals without losing its character.
Make it yours.
One HTML file, one stylesheet. The whole look is a handful of CSS variables at the top.
Use this template