Ultra 3D card

admin1234
Feb 07, 2026 8
Live Preview

Live Editor

<div class="scene">
  <div class="card">
    <div class="glass"></div>

    <div class="icon">⚡</div>

    <div class="content">
      <h3>Ultra 3D Card</h3>
      <p>
        Holographic depth, floating layers,
        and premium motion — made for
        next-gen UI platforms.
      </p>
    </div>

    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
  </div>
</div>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,#020617,#000);
  font-family: system-ui, sans-serif;
  overflow:hidden;
}

/* 3D Scene */
.scene{
  perspective:1400px;
}

/* Card */
.card{
  width:300px;
  height:300px;
  position:relative;
  border-radius:28px;
  background:
    linear-gradient(145deg,#020617,#020617),
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 40%);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.16,.8,.3,1);
  box-shadow:
    0 60px 120px rgba(0,0,0,.85);
}

/* Hover tilt */
.scene:hover .card{
  transform: rotateX(18deg) rotateY(-18deg);
}

/* Holographic glow */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    linear-gradient(120deg,
      #00f5ff,
      #7c7cff,
      #ff4ecd,
      #00f5ff);
  filter:blur(40px);
  opacity:.45;
  z-index:-1;
  animation: holo 6s linear infinite;
}

@keyframes holo{
  0%{filter:blur(30px) hue-rotate(0deg)}
  100%{filter:blur(30px) hue-rotate(360deg)}
}

/* Glass surface */
.glass{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
  transform: translateZ(30px);
}

/* Floating Icon */
.icon{
  position:absolute;
  top:36px;
  left:36px;
  width:70px;
  height:70px;
  border-radius:22px;
  background:linear-gradient(135deg,#00f5ff,#7c7cff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:#020617;
  transform: translateZ(70px);
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  animation: float 4s ease-in-out infinite;
}

/* Text */
.content{
  position:absolute;
  bottom:40px;
  left:36px;
  right:36px;
  color:#fff;
  transform: translateZ(55px);
}

.content h3{
  margin:0 0 8px;
  font-size:22px;
}

.content p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#c7d2fe;
}

/* Floating particles */
.particle{
  position:absolute;
  width:6px;
  height:6px;
  background:#7c7cff;
  border-radius:50%;
  opacity:.7;
  animation: drift 6s infinite ease-in-out;
}

.particle:nth-child(1){top:40%;left:80%;animation-delay:0s}
.particle:nth-child(2){top:65%;left:20%;animation-delay:2s}
.particle:nth-child(3){top:20%;left:60%;animation-delay:4s}

@keyframes float{
  0%,100%{transform:translateZ(70px) translateY(0)}
  50%{transform:translateZ(70px) translateY(-10px)}
}

@keyframes drift{
  0%,100%{transform:translateY(0);opacity:.4}
  50%{transform:translateY(-20px);opacity:1}
}
Categories

Ultra 3D card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
