CSS Generator

Glassmorphism Studio

Generate sleek, frosted-glass UI components. Adjust the properties below and copy the generated CSS to use in your projects.

Blur Radius16px

Background Opacity0.10

Border Opacity0.20

CSS Output

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

Glass Card

This card dynamically updates based on your settings. It utilizes the CSS backdrop-filter property to create a beautiful frosted glass effect.