cardglassmorphismintermediate

Glassmorphism Card

A frosted glass card with backdrop blur, semi-transparent background, and subtle border.

Preview

Glass Card

This card uses backdrop-blur for a frosted glass look on any colorful background.

<div class="bg-gradient-to-br from-purple-600 to-blue-500 p-10 min-h-[300px] flex items-center justify-center">
  <div class="bg-white/20 backdrop-blur-xl rounded-2xl border border-white/30 shadow-2xl p-8 max-w-sm">
    <h3 class="text-xl font-bold text-white mb-2">Glass Card</h3>
    <p class="text-white/80 text-sm leading-relaxed">This card uses backdrop-blur for a frosted glass look on any colorful background.</p>
  </div>
</div>

Color Breakdown

Card Background

bg-white/20

#ffffff33

Border

border-white/30

#ffffff4d

Title Text

text-white

#ffffff

Body Text

text-white/80

#ffffffcc

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-black/30 dark:border-white/10

Use Cases

Hero section overlaysFeature highlightsModal dialogs

Browser Support

Chrome 76+, Firefox 103+, Safari 9+, Edge 79+. Backdrop-filter not supported in older browsers.

Related Recipes

Neumorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Testimonial Card

card - beginner

Feature Card

card - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Why doesn't the blur show on plain white backgrounds?▼
Glassmorphism needs a colorful or image background behind it to see the blur effect. Place the card over a gradient or image.
How do I increase the blur intensity?▼
Change backdrop-blur-xl to backdrop-blur-2xl or backdrop-blur-3xl for a stronger frosted effect.