DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
3D UI 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
3D UI card
rohit325
Feb 04, 2026
11
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
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); }
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!