assistant-ui logo/
Tailwind CSS v4 Plugin

tw-glass

Realistic glass refraction for Tailwind. Pure CSS, no JavaScript.

npm install tw-glass
styles/globals.css
Glass Refraction
Composable utilities for glass-like displacement effects.
glass
Base utility. Applies SVG displacement filter via backdrop-filter. Requires visible content behind the element.
glass glass-surface
Add frosted surface styling (semi-transparent background + inner glow + shadow).
Displacement Strength
Control how much the background is distorted.
glass-strength-{value}
Displacement intensity. Available: 5, 10, 20 (default), 30, 40, 50. Higher values create more dramatic refraction.
5
20
50
Chromatic Aberration
Simulates light dispersion through a prism using RGB channel splitting.
glass-chromatic-{value}
Replaces standard displacement with per-channel RGB splitting. Same strength levels: 5, 10, 20, 30, 40, 50.
10
20
40
Modifiers
Fine-tune blur, saturation, and brightness with any numeric value.
glass-blur-{px}
Post-displacement blur in pixels. Default: 2px.
0px
2px
6px
glass-saturation-{pct}
Color saturation as a percentage. Default: 120 (1.2x). 100 = no change.
50
120
200
glass-brightness-{pct}
Brightness as a percentage. Default: 105. 100 = no change.
80
105
140
Composition
Combine any modifiers with the base glass class.