Site icon StakeDesigner

How to Create a Modern Glassmorphism Profile Card using HTML & CSS

Editor
Glassmorphism Profile Card

Glassmorphism Profile Card

Glassmorphism remains a top design trend for sleek, modern web interfaces. In this tutorial, you will learn how to create a responsive glassmorphism card HTML & CSS component from scratch.

This guide covers the core CSS properties needed for frosted glass styling, complete source code, and responsive layout techniques.

What is a Glassmorphism Profile Card using HTML & CSS?

A glassmorphism card HTML & CSS element uses background translucency, multi-layered shadows, and depth effects to mimic frosted glass.

The essential CSS properties involved are:

To learn more about how browser rendering handles backdrop blurs, review the MDN Web Docs on backdrop-filter.

Glassmorphism continues to be one of the most popular UI trends in modern web design. Its sleek, translucent “frosted-glass” appearance paired with vibrant background gradients gives websites a clean, futuristic look.

In this tutorial, we will build a responsive Glassmorphism Profile Card with glowing border effects using pure HTML and CSS—no external libraries needed!

🛠️ Key Features of Our Component

Step 1: The HTML Structure (index.html)

Let’s set up a simple card container with an avatar, user details, and action buttons:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Glassmorphism Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="background-decorations">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
  </div>

  <div class="glass-card">
    <div class="avatar-wrapper">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80" alt="Profile Avatar" class="avatar">
    </div>
    <h2 class="name">Sarah Jenkins</h2>
    <p class="role">UI/UX Designer & Frontend Dev</p>
    
    <div class="stats">
      <div class="stat-item">
        <span class="count">24</span>
        <span class="label">Projects</span>
      </div>
      <div class="stat-item">
        <span class="count">12.5k</span>
        <span class="label">Followers</span>
      </div>
      <div class="stat-item">
        <span class="count">450</span>
        <span class="label">Following</span>
      </div>
    </div>

    <button class="btn-follow">Follow Profile</button>
  </div>

</body>
</html>

Step 2: The CSS Magic (style.css)

Now apply the styling rules. We use Flexbox centering, background glow layers, and the frosted glass effect. If you are brushing up on layout fundamentals, check out our tutorial on how to master Flexbox in CSS.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f172a;
  overflow: hidden;
  position: relative;
}

/* Background floating glow orbs */
.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.circle-1 {
  width: 280px;
  height: 280px;
  background: #6366f1;
  top: 15%;
  left: 30%;
}

.circle-2 {
  width: 250px;
  height: 250px;
  background: #ec4899;
  bottom: 20%;
  right: 32%;
}

/* The Glassmorphism Card */
.glass-card {
  position: relative;
  width: 320px;
  padding: 30px 24px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  text-align: center;
  color: #fff;
  transition: transform 0.3s ease, border-color 0.3s ease;
  z-index: 10;
}

.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Avatar Styling */
.avatar-wrapper {
  margin-bottom: 16px;
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
}

.name {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.role {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 24px;
}

/* Stats Row */
.stats {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  margin-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item .count {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}

.stat-item .label {
  font-size: 0.75rem;
  color: #cbd5e1;
}

/* Button */
.btn-follow {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-follow:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

Testing Your Glassmorphism Card HTML CSS Project

Once implemented, open your browser developer tools to test responsive breakpoints. For testing interactive components, you can also load this project into an online environment like CodePen.

If you want to add interactive features like dynamic click events or saving user states to this card, check out our guide on JavaScript Local Storage vs Session Storage.

Exit mobile version