Glassmorphism CSS Generator

Dial in a frosted-glass surface, preview it on real backgrounds, and copy it as CSS, Tailwind, or React.

CSS Tailwind React

Glass

Frosted surface

Everything behind this card is blurred, saturated and tinted by the values you set.

Preview only

Preview only — the background never appears in the generated code.

Controls

Lock a control to keep it while you Randomize the rest.

Glass

Blur 20px

Transparency 0.15

Saturation 180%

Tint color

Sets the RGB of the fill, border and glow.

Shape

Border radius 20px

Border width 1.00px

Border opacity 0.30

Depth & Glow

Depth 10

Drop shadow 0.00px

Adds filter: drop-shadow(), which follows the glass shape instead of its box.

Glow / inner highlight

Glow intensity 0.50