Glassmorphism CSS generator
Generate CSS for frosted-glass panels or soft neumorphic surfaces from a few sliders.
Glassmorphism CSS generator
Build a complete, ready-to-paste CSS rule for a frosted-glass panel or a soft neumorphic surface without writing any values by hand. Pick glassmorphism for a translucent card that blurs whatever sits behind it — the look used on modern dashboards, login panels and modals — or neumorphism for a surface that appears to be molded from the same material as its background, using a pair of opposing soft shadows instead of transparency.
The options map directly to the properties the tool writes. In glass mode, surface opacity and blur strength control the background alpha and backdrop-filter blur, while border thickness and border brightness set a thin, semi-transparent edge that keeps the panel readable against busy backgrounds. Shadow distance and softness shape the drop shadow beneath the panel, and the shape switch flips it to an inset shadow for a recessed look. In neumorphism mode, the same shadow distance and softness values drive a light shadow and a dark shadow computed from your surface color, raised or pressed depending on the shape you pick. Corner rounding and a dark-mode variant apply to both styles.
Because a frosted or softly shadowed surface can land in a mid-tone that is hard to read with either black or white text, the tool checks the resulting contrast and adds a short warning comment above the CSS when neither text color would sit comfortably above WCAG AA — a nudge to adjust the surface color or opacity rather than a guess.
Everything runs locally in your browser as you move the sliders — no design tool, no account and nothing sent to a server. Copy the CSS straight into your stylesheet, download it as a .txt file, or send the output back into the input to keep adjusting it.