Back to Snippets

Glassmorphism Card Snippet.

A frosted-glass profile card built with pure CSS backdrop-filter. Features animated background blobs, a hover lift effect, avatar, stats row, and a glass button. No JavaScript required.

How to Use?
Paste the HTML into your page and add the CSS. Place the .scene wrapper over any colorful or blurred background for the glass effect to show. Swap out the avatar, name, and stats with your own content.

Credits
Built using CSS backdrop-filter, rgba backgrounds, and CSS keyframe animations.

<div class="scene">
  <div class="glass-card">
    <div class="card-avatar">
      <img src="https://i.pravatar.cc/80" alt="avatar" />
    </div>
    <h2 class="card-name">Alex Rivera</h2>
    <p class="card-role">UI Designer & Developer</p>
    <div class="card-stats">
      <div class="stat">
        <span class="stat-value">248</span>
        <span class="stat-label">Projects</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat">
        <span class="stat-value">14k</span>
        <span class="stat-label">Followers</span>
      </div>
      <div class="stat-divider"></div>
      <div class="stat">
        <span class="stat-value">91%</span>
        <span class="stat-label">Rating</span>
      </div>
    </div>
    <button class="card-btn">Follow</button>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scene {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a0533, #0f0c29, #0d1b4b);
  position: relative;
  overflow: hidden;
}

.scene::before,
.scene::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: blob-float 8s ease-in-out infinite alternate;
}

.scene::before {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #8b5cf6, #6d28d9);
  top: -100px;
  left: -80px;
}

.scene::after {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #ec4899, #be185d);
  bottom: -80px;
  right: -60px;
  animation-delay: -4s;
}

@keyframes blob-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.1); }
}

.glass-card {
  width: 300px;
  padding: 2rem 1.75rem;
  border-radius: 1.5rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.04)
  );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #f1f5f9;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.card-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 1rem;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.card-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.card-role {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.5rem;
}

.card-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
}

.card-btn {
  padding: 0.6rem 2.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(109, 40, 217, 0.7));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(139, 92, 246, 0.4);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.card-btn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(109, 40, 217, 1));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.55);
}