Glassmorphism Generator

Create frosted glass UI effects with customizable blur, opacity, and borders. Live preview on a vibrant background.

How it works: Adjust blur, opacity, and border settings to create your glass effect. The preview shows the result on a colorful background. Copy the CSS when ready.

Glass Card
This is a glassmorphism effect with customizable blur, opacity, and border properties.
Background
#ffffff
15%
12px
180%
Border
1px
20%
16px
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);

What is Glassmorphism?

Glassmorphism is a UI design trend that creates a frosted glass effect using CSS backdrop-filter. Elements appear translucent with a blurred background showing through, creating depth and visual hierarchy. Popularized by Apple's macOS and iOS designs, it combines transparency, blur, and subtle borders.

How to Create Glassmorphism Effects

The core properties are backdrop-filter: blur() for the frosted effect, a semi-transparent background-color for the tint, and a subtle border for edge definition. Adjust the blur radius for more or less transparency, and use background saturation to enhance colors visible through the glass.

Browser Support for Glassmorphism

The backdrop-filter property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, provide a fallback solid background color. Use @supports (backdrop-filter: blur(1px)) to conditionally apply the glass effect.

Glassmorphism Design Tips

  • Use on vibrant or gradient backgrounds for the best visual impact
  • Keep blur between 8-20px for readable text behind glass
  • Add a subtle white or light border for edge definition
  • Ensure text contrast meets WCAG accessibility guidelines
  • Layer multiple glass panels at different opacities for depth
  • Combine with subtle box-shadow for extra elevation