categories.css.title
css-glass
All-in-one developer toolkit with 50+ free online tools. JSON formatter, Regex tester, Base64 encoder, QR code generator, Markdown editor, Color converter, Unit converter, CSS generator, and more. 100% client-side, privacy-first.
cssglassglassmorphismeffectgenerator
CSS Glassmorphism Generator
Backdrop Blur16px
Background Opacity25%
Saturation180%
Border Radius16px
Border Opacity18%
Background Color
Preview
Glass Card
This is a glassmorphism effect preview. Adjust the controls to customize the blur, opacity, saturation, and border properties.
CSS Code
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}