Glassmorphism CSS Generator
Free glassmorphism generator: adjust blur, transparency and color, preview the frosted glass effect live, and copy the CSS in one click.
Prefer a ready-made version? Copy the CSS glass effect snippet, a frosted glass card with a dark variant and a fallback for older browsers
Glassmorphism needs something colorful behind it to blur. Create that background with the gradient generator, then place your glass card on top.
What is glassmorphism?
Glassmorphism is a UI style where an element looks like frosted glass: a semi-transparent background, a blur on whatever sits behind it, and a thin light border. It works best on top of colorful backgrounds or images, since there has to be something behind the element to blur.
How to use this glassmorphism generator
Move the Blur slider to set how frosted the glass looks, set Transparency to control how much of the background shows through, and pick a Color for the tint. The preview updates live. Copy the CSS and paste it onto any element.
Browser support
The effect relies on backdrop-filter, which works in all modern browsers. The generated code includes the -webkit- prefix for older Safari versions. For browsers without support, give the element a more opaque fallback background so text stays readable.