Glassmorphism Generator

Glass Properties

Blur: 10px10px

Transparency: 30%30%

Border Radius: 16px16px

Border

Border Width: 1px1px

Border Color:

Border Opacity: 30%30%

Shadow

Shadow Blur: 10px10px

Shadow Opacity: 15%15%

Shadow Offset: 0px0px

Background

GradientPattern

Box Size

Width: 500px500px

Height: 300px300px

Presets

Glassmorphism

This is a preview of your glass effect

Generated CSS

/* Glass effect */
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);