GlaCSS
Open Source Glassmorphism CSS Generator
Generate awesome CSS snippets for glassmorphism effects.
Just set your settings, copy the generated CSS and paste it into your CSS file. Happy Coding!
Background Type
Background Image
Card Settings
Other Settings
Preview
Loading Preview...
CSS Output
gla.css
body {
background: url("https://images.unsplash.com/photo-1613327986042-63d4425a1a5d?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center center / cover;
}
.card {
color: #fff;
background-color: rgba(64, 64, 64, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
filter: saturate(1.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* CSS Code provided by https://GlaCSS.barysh.xyz/ */