Holographic Tilt Card

jitesh208

Jan 17, 2026 2

Live Preview

Live Editor

<div class="card-holo">
  <h3>AI Component</h3>
  <p>Next-gen UI block</p>
</div>
body{
  background:#fff;
}

.card-holo{
  width:320px;
  padding:30px;
  background:#0b0b12;
  color:#fff;
  border-radius:20px;
  position:relative;
  transform-style:preserve-3d;
  transition:.4s ease;
}
.card-holo::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(130deg,#00f5ff,#ff00d4,#7cff00);
  filter:blur(18px);
  opacity:.4;
  z-index:-1;
}
.card-holo:hover{
  transform:rotateX(6deg) rotateY(-6deg) scale(1.04);
}

Comments 0

Want to comment?

Please login or sign up to post comments.

No comments yet

Be the first to comment on this component!

Categories

Holographic Tilt Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet