Glassmorphism Generator

Generate glassmorphism CSS — blur, transparency, and soft borders for frosted panels.

Blur (px)

16px

Suggested Tools

Color Picker
Pick a color visually and copy HEX, RGB, or HSL values for CSS and design tools.
HEX ↔ RGB
Convert colors between HEX and RGB for CSS, canvas, and design handoff.
HEX ↔ HSL
Convert colors between HEX and HSL for tweaking lightness and saturation in CSS.

Glassmorphism Generator produces backdrop-filter friendly snippets for modern glassy cards and navs.

Adjust blur and opacity, run, and copy the CSS. Check browser support for backdrop-filter.

Please enable JavaScript.