Tailwind CSS v4 Plugin

tw-glass

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

npm install tw-glass

styles/globals.css

@import "tailwindcss";
@import "tw-glass";

Glass Refraction

Composable utilities for glass-like displacement effects.

Base utility. Applies SVG displacement filter via backdrop-filter. Requires visible content behind the element.

<div class="glass rounded-xl p-6">Glass panel</div>

Add frosted surface styling (semi-transparent background + inner glow + shadow).

<div class="glass glass-surface rounded-xl p-6">Frosted panel</div>

Control how much the background is distorted.

Displacement intensity. Available: 5, 10, 20 (default), 30, 40, 50. Higher values create more dramatic refraction.

<div class="glass glass-strength-40 rounded-xl p-6">Strong glass</div>

5

20

50

Simulates light dispersion through a prism using RGB channel splitting.

Replaces standard displacement with per-channel RGB splitting. Same strength levels: 5, 10, 20, 30, 40, 50.

<div class="glass glass-chromatic-20 rounded-xl p-6">Chromatic glass</div>

10

20

40

Fine-tune blur, saturation, and brightness with any numeric value.

Post-displacement blur in pixels. Default: 2px.

<div class="glass glass-blur-6 rounded-xl p-6">Blurry glass</div>

0px

2px

6px

Color saturation as a percentage. Default: 120 (1.2x). 100 = no change.

<div class="glass glass-saturation-200 rounded-xl p-6">Vivid glass</div>

50

120

200

Brightness as a percentage. Default: 105. 100 = no change.

<div class="glass glass-brightness-130 rounded-xl p-6">Bright glass</div>

80

105

140

Combine any modifiers with the base glass class.

<div class="glass glass-strength-30 glass-blur-4 glass-saturation-150 glass-surface rounded-xl p-6">
  Composed glass panel
</div>