IyeTech logoiyetech
Back to Tools

Glassmorphism Generator

Create beautiful modern frosted-glass CSS code. Adjust settings, preview real-time blur/opacity, and copy the CSS.

Adjust Settings

Backdrop Blur16px
Transparency / Opacity25%
Background Color#ffffff
Border Opacity20%
Border Radius16px

CSS Code

/* Glassmorphism Styles */
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
Preview Background

Frosted Card

Glassmorphism UI

Sample Component