3D UI card

rohit325
Feb 04, 2026 11
Live Preview

Live Editor

<div class="card-3d">
  <div class="card-inner">
    <div class="card-content">
      <h3>3D UI Card</h3>
      <p>Smooth tilt, depth & glow animation</p>
      <span class="card-tag">Premium UI</span>
    </div>
  </div>
</div>
body{
  background:#0b0f1a;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui;
}

.card-3d{
  width:280px;
  height:180px;
  perspective:1000px;
}

.card-inner{
  width:100%;
  height:100%;
  position:relative;
  border-radius:16px;
  background:linear-gradient(145deg,#1e2a78,#0f3460);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1),
             box-shadow 0.6s;
  transform-style:preserve-3d;
}

.card-3d:hover .card-inner{
  transform:rotateX(12deg) rotateY(-12deg) translateY(-8px);
  box-shadow:
    0 35px 60px rgba(0,0,0,0.6);
}

/* Glow layer */
.card-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  background:linear-gradient(120deg,#00f2ff,#7cffcb,#5f2cff);
  filter:blur(18px);
  opacity:0;
  transition:opacity 0.6s;
  z-index:-1;
}

.card-3d:hover .card-inner::before{
  opacity:0.7;
}

.card-content{
  position:absolute;
  inset:0;
  padding:20px;
  color:#fff;
  transform:translateZ(40px);
}

.card-content h3{
  margin:0;
  font-size:18px;
}

.card-content p{
  font-size:13px;
  opacity:0.85;
  margin-top:6px;
}

.card-tag{
  margin-top:18px;
  display:inline-block;
  padding:6px 12px;
  font-size:12px;
  border-radius:20px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(6px);
}
Categories

3D UI card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
