cardsintermediate

Glassmorphism Card

Frosted glass effect card with backdrop blur and subtle borders.

Preview

Glass Card

Frosted glass effect

Tailwind Classes

bg-white/30 backdrop-blur-lg rounded-2xl border border-white/20 shadow-xl

CSS Code

.glass-card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

HTML Example

<div class="bg-gradient-to-br from-purple-500 to-pink-500 p-8">
  <div class="bg-white/30 backdrop-blur-lg rounded-2xl border border-white/20 shadow-xl p-6">
    <h3 class="text-white font-bold">Glass Card</h3>
    <p class="text-white/80">Frosted glass effect</p>
  </div>
</div>

Use Cases

Hero sectionsOverlay cardsModal dialogsFeature highlights

Browser Support

Chrome 76+, Firefox 103+, Safari 9+, Edge 79+

#glassmorphism#blur#cards#modern