Let’s make Glassmorphism Profile Card with Social Links

By /

Let’s build something cool, stylish, and modern using only HTML5 and CSS3 “Glassmorphism Profile Card with Social Links“.

Glassmorphism Profile Card with Social Links

What We’re Building

A modern glass-style profile card with:

  • Profile photo
  • Name and role
  • About section
  • Social media icons
  • Frosted-glass effect
  • Hover glow animations

We’ll Build It In 5 Steps

Step 1: HTML structure — base layout
Step 2: CSS base styles — center, fonts, layout
Step 3: Glassmorphism magic — blur, transparency, shadow
Step 4: Social icons and hover effects
Step 5: Responsive tweaks (optional but helpful)

Awesome! Let’s begin with Step 1: HTML Structure 🧱

We’ll write the basic HTML for our Glassmorphism Profile Card. This includes the wrapper, profile image, name, job title, about section, and social media links.

Step 1: HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Profile Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="profile-pic">
            <img src="https://i.pravatar.cc/150?img=3" alt="Profile Picture">
        </div>
        <h2>Jane Doe</h2>
        <p class="job">Frontend Developer</p>
        <p class="about">Lover of clean code, pixel perfection, and iced coffee. Building the future one div at a time.</p>
        <div class="socials">
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733558.png" alt="Twitter"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733614.png" alt="Instagram"></a>
        </div>
    </div>
</body>
</html>
Code language: HTML, XML (xml)

Quick Breakdown:

  • .card – main container
  • .profile-pic – holds the circular image
  • h2, .job, .about – name, title, description
  • .socials – links to socials using icon images

Now, let’s make it shine ✨ with Step 2: CSS Base Styling!

We’ll start by:

  • Centering the card
  • Setting the background gradient
  • Styling the font and layout
  • Giving the card a base look (before glassmorphism)

Step 2: CSS Base Styles (style.css)

/* Importing a clean Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  font-family: 'Poppins', sans-serif;
  background-image: url(https://picsum.photos/1920/1080);
}

.card {
  width: 320px;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  color: white;
  background: rgba(255, 255, 255, 0.1); /* translucent */
}
Code language: CSS (css)

What We Did:

  • Set a dark gradient background for contrast.
  • Imported Poppins for clean typography.
  • Created a basic card layout with padding and centered text.

Right now the card is still flat, but the structure is laid.

Up Next: Let’s add the glass effect, profile image styling, and soft glow.

Time to add that frosted glassmorphism effect, smooth profile image, and glowing style!

Step 3: Add Glassmorphism + Image Styling

Continue inside your style.css file:

.card {
  /* previous styles stay */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Profile image */
.profile-pic {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Code language: CSS (css)

What’s Happening:

  • backdrop-filter: blur(10px) gives that frosted-glass magic.
  • A soft border and light glow add a dreamy modern touch.
  • The profile pic is a perfect circle, neatly framed and blurred-glow enhanced.

You should now see something that looks like it came out of a UI design dribble shot.

Wanna see how those social icons shine when hovered?

Let’s bring the glow! 💡✨
This is where our social icons get that magical hover effect—soft neon glows that feel alive.

Step 4: Style Social Icons + Hover Glow

Add this to your style.css:

.socials {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.socials a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.socials img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1); /* make icons white */
  transition: transform 0.3s ease;
}

.socials a:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.socials a:hover img {
  transform: rotate(10deg);
}
Code language: CSS (css)

Result:

  • Each social icon sits in a translucent bubble.
  • On hover: glow appears, it scales up, and the icon rotates slightly.
  • Super clean, super interactive 💎

Your card now looks alive — modern, elegant, and beautifully responsive to interaction.

✅ Only one last optional step left: making it a bit responsive on smaller screens and tweaking padding for mobiles.

Let’s add the final responsive touch so your Glassmorphism card looks stunning on all devices, then I’ll give you the complete code bundle to copy-paste and go live!

Step 5: Responsive Tweaks

Add this at the end of your style.css:

@media (max-width: 400px) {
  .card {
    width: 90%;
    padding: 20px;
  }

  .about {
    font-size: 14px;
  }

  .socials {
    gap: 15px;
  }

  .socials a {
    width: 35px;
    height: 35px;
    padding: 6px;
  }
}
Code language: CSS (css)

This ensures:

  • Card resizes nicely on small screens
  • Fonts and icons scale for readability
  • Nothing looks squished!

✅ Full Final Code Bundle

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Profile Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="profile-pic">
            <img src="https://i.pravatar.cc/150?img=3" alt="Profile Picture">
        </div>
        <h2>Jane Doe</h2>
        <p class="job">Frontend Developer</p>
        <p class="about">Lover of clean code, pixel perfection, and iced coffee. Building the future one div at a time.</p>
        <div class="socials">
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733558.png" alt="Twitter"></a>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/733/733614.png" alt="Instagram"></a>
        </div>
    </div>
</body>
</html>
Code language: HTML, XML (xml)

🎨 style.css

/* Importing a clean Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  font-family: 'Poppins', sans-serif;
  background-image: url(https://picsum.photos/1920/1080);
}

.card {
  width: 320px;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  color: white;
  background: rgba(255, 255, 255, 0.1); /* translucent */
}

.card {
  /* previous styles stay */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Profile image */
.profile-pic {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.socials {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.socials a {
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.socials img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1); /* make icons white */
  transition: transform 0.3s ease;
}

.socials a:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.socials a:hover img {
  transform: rotate(10deg);
}

@media (max-width: 400px) {
  .card {
    width: 90%;
    padding: 20px;
  }

  .about {
    font-size: 14px;
  }

  .socials {
    gap: 15px;
  }

  .socials a {
    width: 35px;
    height: 35px;
    padding: 6px;
  }
}
Code language: CSS (css)

Done! Now You Can:

  • Customize the name, photo, text, and social links.
  • Use it in a portfolio, landing page, or even as a cool login page header!
Glassmorphism Profile Card with Social LinksDownload

Discover more from Prime Inspire

Subscribe to get the latest posts sent to your email.

Related Posts

We’d love to hear your thoughts! Share your ideas below 💡

Scroll to Top