Free CSS Backdrop-Filter Frosted Glass Generator

Design beautiful, high-performance glassmorphism effects in seconds. Adjust your settings below and copy the generated CSS directly to your project.

Blur Radius 10px

Background Opacity 20%

Border Radius 16px

Border Width 1px

Background Tint

Background Texture

Glassmorphism

Adjust settings to see the magic happen.

Generated CSS


backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 16px;