3D Floating Profile Card

jitesh208
Jan 17, 2026 4
Live Preview

Live Editor

<div class="scene">
  <div class="card-3d">
    <div class="glow"></div>

    <div class="card-inner">
      <img class="avatar" src="https://i.pravatar.cc/120?img=32" />

      <div class="info">
        <h3>Verona Nov</h3>
        <div class="tags">
          <span>Writer</span>
          <span class="gold">Golden User</span>
        </div>
        <p>I write short stories and fanfiction for the most popular fandoms</p>
      </div>

      <div class="actions">
        <button class="follow">+ Follow</button>
        <div class="icon">✉️</div>
        <div class="icon">🔔</div>
      </div>
    </div>
  </div>
</div>
body{
  background:#f4f6f8;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-family:system-ui;
}

.scene{
  perspective:1000px;
}

.card-3d{
  width:300px;
  height:230px;
  position:relative;
  border-radius:28px;
  transform-style:preserve-3d;
  transition:0.6s cubic-bezier(.16,1,.3,1);
}

/* Ambient glow */
.glow{
  position:absolute;
  inset:-16px;
  border-radius:32px;
  background:radial-gradient(circle at 30% 30%,
    #ffb703,
    #fb8500,
    #8ecae6,
    transparent 70%);
  filter:blur(32px);
  opacity:.7;
  z-index:-1;
}

/* Card base */
.card-inner{
  height:100%;
  padding:22px;
  background:linear-gradient(135deg,#ffffff,#f1f3f6);
  border-radius:26px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform:translateZ(30px);
}

/* Avatar */
.avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  transform:translateZ(40px);
}

/* Text */
.info h3{
  margin:10px 0 6px;
  font-size:18px;
}

.tags span{
  font-size:11px;
  padding:4px 10px;
  border-radius:16px;
  background:#eef1f5;
  margin-right:6px;
}

.tags .gold{
  background:#fff3c4;
}

.info p{
  margin-top:10px;
  font-size:13px;
  color:#555;
  line-height:1.4;
}

/* Actions */
.actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

.follow{
  flex:1;
  padding:12px;
  font-size:14px;
  border-radius:22px;
  background:#000;
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow:0 14px 24px rgba(0,0,0,.25);
}

.icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}

/* Hover tilt */
.card-3d:hover{
  transform:
    rotateX(10deg)
    rotateY(-12deg)
    translateY(-8px);
}
Categories

3D Floating Profile Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
