CSS Glassmorphism Generator

Create frosted glass effect with CSS

Browser ProcessingYour data never leaves your browser

Glass Effect Settings

Blur16px
Transparency20%
Saturation180%
Border Radius16px
Border Width1px

Colors

Glass Tint
Border Color
Shadow Color
Text Color

Enable Shadow

Shadow Blur
Shadow Spread

Preview

Glassmorphism

A modern UI design trend that creates a frosted glass effect using backdrop filters and transparency.

Button

CSS 

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0px rgba(0, 0, 0, 0.2);
}

Presets

Related Tools

CSS Gradient GeneratorCreate beautiful linear and radial CSS gradients
CSS Box Shadow GeneratorGenerate CSS box-shadow with visual editor
CSS Text Shadow GeneratorGenerate CSS text-shadow effects visually
CSS Border Radius GeneratorCreate custom border-radius with visual editor