Glassmorphism Generator

Create trendy glass-effect CSS

Ready• 16px blur

Blur: 16px

Opacity: 25%

Border: 1px @ 30%

Radius: 16px

Shadow: On

Tint: white

Controls

Background

Blur16px

Transparency25%

Border Width1px

Border Opacity30%

Border Radius16px

Enable Shadow

Tint Color

Presets

Preview & CSS16px blur

Glass Card

This is a glassmorphism effect with blur, transparency, and a subtle border. Perfect for modern UI designs.

CSS Output

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.3);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

About Glassmorphism Generator

Free online glassmorphism generator. Create frosted glass effects with blur, transparency, and borders. Perfect for modern UI design.

Box Shadow Generator
Border Radius Generator
Color Converter

Glass Card

About Glassmorphism Generator

Related Tools

Glass Card