Glassmorphism Generator

Generate glassmorphism CSS effects with live preview. Create frosted glass UI cards.

  • 100% free
  • Private in browser
  • No signup
  • No watermarks
#4f46e5
16px
10px
25%
18%

Preview

Glass Card

Frosted glass effect

Generated CSS

.glass-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Rate this tool

Be the first to rate — helps others and improves this page.

About Glassmorphism Generator

Glassmorphism Generator creates beautiful frosted glass CSS effects. Adjust blur, opacity, border, and background.

How to use Glassmorphism Generator

  1. Pick a background color.
  2. Adjust blur, opacity, and border.
  3. Copy the generated CSS.

Key features

  • Live preview with background gradient
  • Adjustable blur, opacity, border
  • Copy CSS to clipboard
  • Supports custom border radius
  • Works with any background

Frequently asked questions

What browsers support glassmorphism?
All modern browsers support backdrop-filter. For older browsers, use a fallback with lower opacity.