Glassmorphism Generator

Design and preview glassmorphism CSS backdrop effects.

Design premium CSS and Tailwind frosted glass filters with fluid drift background previews and responsive code generation.

Quick Presets

Live Playground

Drag sliders on the right and watch the glass refract shapes in real-time.

Preview Card Content:

Glass CardPremium Platinum

4582 •••• •••• 9210

Valid Thru: 08/29CVV: ***

Cardholder Name

BERKAY BAYAR

Change background under glass:

Generated Code

Copy standard CSS rules or Tailwind utilities for your components.

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(100%);
  -webkit-backdrop-filter: blur(16px) saturate(100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
}

Backdrop-filter is fully supported by all modern browsers. Make sure your parent container has a colorful background for the blur effect to be visible.

Customize Effect

Background Overlay

HEX Code

OPACITY15%

Backdrop Filters

BACKDROP BLUR16px

SATURATION100%

Glass Border

Enable

BORDER WIDTH1px

BORDER OPACITY25%

Corner Rounding

Split Corners

BORDER RADIUS16px

Drop Shadow

Enable

BLUR RADIUS24px

SPREAD RADIUS0px

OPACITY10%

Offset X

Offset Y