Glassmorphism Generator

Generate glassmorphism CSS effects.

Blur: 10px

Transparency: 0.10

Border Opacity: 0.18

CSS Code

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);

Glass Card

This is a preview of your glassmorphism effect. Adjust the sliders to customize the look.