Designing Glassmorphism Effect Profile Card Using CSS

Profile-Card is a beautiful css glassmorphism effect profile card. It is very useful to blog site.

Designing Glassmorphism Effect Profile Card Using CSS

AuthorLinksMade withLast update
RedEdge967Office HomeJavaScriptOct 09, 2022

How to use it?

You can download Profile-Card source code and view index.html to learn how to do.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Glassmorphism My Card</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body class="black-theme">
<div id="switch">
  <i class="fas fa-sun"></i>
</div>
<div class="container">
  <div class="card">
    <div class="card__top">
      <img src="https://cdn.pixabay.com/photo/2016/10/26/23/24/colors-1772977_1280.jpg" alt="Sky">
       <div class="profile__photo">
      <img src="https://assets.codepen.io/7019167/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1639040682&width=512" alt="Profile Photo">
    </div>
    </div>
   
    <div class="card__content">
      <h2>Chandula Janith</h2>
      <h3>Web Developer</h3>
      <p><span><i class="fas fa-map-marker-alt"></i></span>Colombo, Sri Lanka</p>
       <p><span><i class="far fa-building"></i></span>School Student</p>
      <p><span><i class="far fa-envelope"></i></span><a href="mailto:janith967@gmail.com">janithc967@gmail.com</a></p>
      <a href="https://github.com/RedEdge967" class="button">Github Projects</a>
    </div>
  </div>
</div>
  </body>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>