DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Ultra 3D card - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Ultra 3D card
admin1234
Feb 07, 2026
8
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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} }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!