Glassmorphism CSS Generator

Generate beautiful glassmorphism CSS with real-time preview. Create frosted glass UI effects instantly.

Preset

Blur & Opacity

Blur Radius: 35px

Opacity: 10%

Border

Border Width: 1px

Border Color

Border Opacity: 12%

Background

Background Color

Shadow

Shadow Blur: 45px

Shadow Opacity: 8%

Gradient

Enable Gradient

Live Preview

Glassmorphism

This is how your content looks inside a glass effect. Adjust the settings to customize the appearance.

Background

Generated CSS

.glass-effect {
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 11px 45px rgba(0, 0, 0, 0.08);
}