Glassmorphism Generator API

Generate frosted-glass (glassmorphism) CSS: translucent background, backdrop blur and saturation (with the -webkit- prefix), border, radius and shadow.

Create frosted-glass CSS: set blur, opacity, colour, saturation, border, radius and shadow, preview it on a colourful background, and copy the CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

blur

Backdrop blur in px. (number, 0 to 50, default 12)

transparency

Background opacity of the glass in %. (number, 0 to 100, default 20)

color

Glass tint colour: hex, rgb(), hsl() or hsv() (no colour names); its alpha is ignored. (string, up to 100 characters, default "#ffffff")

saturation

Backdrop saturation in %. (number, 100 to 250, default 180)

borderOpacity

White border opacity in % (0 removes the border). (number, 0 to 100, default 30)

radius

Corner radius in px. (number, 0 to 64, default 16)

shadow

Shadow strength in % (0 removes the shadow). (number, 0 to 100, default 30)

preset

A named look instead of the other fields. (string, one of Frosted, Clear, Dark glass, Tinted)