Glassmorphism Generator

Design frosted-glass cards visually — drag the card over vivid backgrounds while you tune blur, transparency, saturation, tint and highlights, then export CSS or Tailwind with a built-in fallback.

Preview

Drag the card around to see how the glass reacts to what is behind it.

Glassmorphism keeps content readable while the background shines through.

Your image

Glass

Blur10px

Transparency12%

Saturation180%

Border35%

Brightness108%

Border width1px

Radius28px

Shadow28%

Tint

Lens refractionChromatic dispersion rim — the Apple liquid-glass edge.Inner glowSoft light blooming from inside the glass.Liquid sheenAn animated specular streak sweeping across.Edge highlightA bright inner top edge, like light catching the glass.Gradient surfaceA diagonal fade across the tint for extra depth.Frost grainA whisper of SVG noise baked into the surface.

Export

Includes a solid-color fallback for browsers without backdrop-filter.

.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(10px) saturate(180%) brightness(108%);
  -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(108%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -1px -1px 1px rgba(255, 255, 255, 0.2), inset 3px 3px 7px rgba(130, 170, 255, 0.3), inset -3px -3px 7px rgba(255, 140, 190, 0.24), inset 0 0 22px rgba(255, 255, 255, 0.18);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(255, 255, 255, 0.42);
  }
}

.glass { position: relative; overflow: hidden; isolation: isolate; }
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: glass-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glass-sheen {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)); backdrop-filter: blur(10px) saturate(180%) brightness(108%); -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(108%); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 28px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -1px -1px 1px rgba(255, 255, 255, 0.2), inset 3px 3px 7px rgba(130, 170, 255, 0.3), inset -3px -3px 7px rgba(255, 140, 190, 0.24), inset 0 0 22px rgba(255, 255, 255, 0.18); } /* Fallback for browsers without backdrop-filter support */ @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255, 255, 255, 0.42); } } .glass { position: relative; overflow: hidden; isolation: isolate; } .glass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); animation: glass-sheen 5s ease-in-out infinite; pointer-events: none; } @keyframes glass-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }