CSS Glassmorphism Generator

Create stunning frosted-glass UI elements with our interactive CSS generator.

Ad PlacementSet NEXT_PUBLIC_ADSENSE_ID to activate

Adjust Parameters

Backdrop Blur16px

Background Opacity0.20

Base Color

CSS Code

/* Glassmorphism CSS */
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

Glassmorphism

This card is using the exact CSS code generated on the left. It looks incredible over colorful, abstract backgrounds.

Loading...

Preparing your workspace