Glassmorphism Profile Card

Preview

Emma Watson

Senior UI/UX Designer

128

Posts

12K

Followers

542

Following

Use Cases & Features

User Dashboards: Perfect for displaying a logged-in user’s profile summary.
Team Introduction Pages: Can be used to beautifully showcase team member information in a grid or list.
Social Platforms: Functions as a digital user business card equipped with CTA buttons like follow or message.
Features:
- A rich glassmorphism effect achieved through backdrop-blur-lg and a semi-transparent background (bg-white/20).
- A sophisticated design that seamlessly blends with the background gradient.

Design & UX Highlights

Visual Appeal of Frosted Glass: By allowing the background gradient to show through, it provides a sense of depth and a modern aesthetic.
Subtle Borders and Shadows: The thin border created by border-white/30 combined with the deep shadow of shadow-2xl makes the card appear to float.
Color Contrast: Utilizing white text ensures high readability while maintaining a cohesive and unified color scheme.
Interaction: A slight change in background brightness and the addition of shadows on button hover enhances the interactive feel and overall user experience.

Customization Guide

Adjusting the Blur: You can fine-tune the intensity of the frosted glass effect by changing backdrop-blur-lg to backdrop-blur-sm or backdrop-blur-xl.
Modifying Transparency: Control the opacity by changing the trailing number in bg-white/20 to values like bg-white/10 or bg-white/30.
Dark Mode Support: For darker backgrounds, using classes like bg-black/20 or border-white/10 helps express a glassmorphism style that perfectly suits dark themes.

Implementation Code

<div class="flex items-center justify-center min-h-[400px] w-full rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-6">
<!-- Glassmorphism card body -->
<div class="relative w-full max-w-sm overflow-hidden rounded-2xl bg-white/20 p-8 shadow-2xl backdrop-blur-lg border border-white/30">
  <!-- Decorative glow effect -->
  <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-2xl"></div>
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-2xl"></div>
  
  <div class="relative z-10 flex flex-col items-center">
    <!-- Profile image -->
    <div class="h-24 w-24 rounded-full overflow-hidden border-2 border-white/50 shadow-inner mb-4">
      <img src="https://i.pravatar.cc/150?img=32" alt="Profile avatar" class="h-full w-full object-cover" />
    </div>
    
    <!-- User information -->
    <h2 class="text-2xl font-bold text-white mb-1">Emma Watson</h2>
    <p class="text-sm text-white/80 font-medium mb-6">Senior UI/UX Designer</p>
    
    <!-- Stats -->
    <div class="flex w-full justify-between px-4 mb-6">
      <div class="text-center text-white">
        <p class="text-lg font-bold">128</p>
        <p class="text-xs text-white/70">Posts</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">12K</p>
        <p class="text-xs text-white/70">Followers</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">542</p>
        <p class="text-xs text-white/70">Following</p>
      </div>
    </div>
    
    <!-- Action buttons -->
    <div class="flex w-full gap-3">
      <button class="flex-1 rounded-lg bg-white/20 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white/30 hover:shadow-md transition-all duration-300 border border-white/30 backdrop-blur-sm">
        Message
      </button>
      <button class="flex-1 rounded-lg bg-indigo-600/80 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-600 hover:shadow-md transition-all duration-300 backdrop-blur-sm border border-indigo-500/50">
        Follow
      </button>
    </div>
  </div>
</div>
</div>

Browser Support

Chrome: Supported (backdrop-filter)
Safari: Supported (may require -webkit-backdrop-filter)
Firefox: Supported
Edge: Supported