depth 3d panels perspective hover hero mockups with visible depth stacked cards in pricing or dashboards premium UI showcases without WebGL card groups feel visually flat need convincing depth with only CSS want layered motion without large code
Layered Panels
Fetch snippet JSON:
curl https://webspire.de/snippets/depth/layered-panels.json Depth
Layered Panels
Hover to separate the stack in Z-space.
Background
Customize
Quick Start
<div class="layered-panels h-72 rounded-[2rem]"><div></div><div></div><article></article></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1402 bytes · 55 lines
- Custom Properties
-
--depth-perspective--depth-duration - Classes
-
.layered-panels
depth 3d panels perspective hover
This pattern turns a simple group of panels into a depth stack. Rear layers sit on negative Z planes while the front face lifts toward the viewer on hover.
Three-layer product stack
<div class="layered-panels h-72 rounded-[2rem]">
<div class="bg-cyan-400/25"></div>
<div class="bg-indigo-400/20"></div>
<article class="rounded-[inherit] border border-white/10 bg-slate-950/70 p-8 text-white">
Front panel
</article>
</div>