~/css/3d-effects

7 CSS 3D Effects

7 Pure CSSPublished 2026-10-05Free · no sign-up

Seven ways to add depth with CSS: an isometric block, a book with a spine and pages, a note with a folded corner, a headline laid back in perspective, a thick button that presses down, a shaded sphere and a card with a stack of layers behind it.

Filter demos

01. Isometric Card

3DIsometric

A card turned into an isometric view with rotateX and rotateZ, with two side faces made from pseudo-elements so it reads as a solid block. Isometric shapes keep parallel lines parallel, which makes them clean for illustrations.

View code

<div class="d31" role="img" aria-label="Isometric block labelled Data"><div class="top">Data</div></div>

.d31 { display: grid; place-items: center; width: 240px; height: 220px; }
.d31 .top { position: relative; display: grid; place-items: center; width: 120px; height: 120px; background: #818cf8; color: #fff; font: 800 18px Inter, system-ui, sans-serif; transform: rotateX(55deg) rotateZ(45deg); transform-style: preserve-3d; }
.d31 .top::before, .d31 .top::after { content: ""; position: absolute; }
.d31 .top::before { left: 0; bottom: -24px; width: 100%; height: 24px; background: #4f46e5; transform-origin: top; transform: rotateX(-90deg); }
.d31 .top::after { right: -24px; top: 0; width: 24px; height: 100%; background: #3730a3; transform-origin: left; transform: rotateY(90deg); }

02. 3D Book Cover

3DBook

A book standing at an angle with a visible spine and page edges, made from a cover face and pseudo-elements turned 90 degrees in 3D space. Hover turns it to face you, a nice touch for ebook and course pages.

View code

<a class="d32" href="#book" aria-label="The Calm Interface, ebook"><span class="cv"><b>The Calm Interface</b><small>A field guide</small></span></a>

.d32 { display: grid; place-items: center; width: 220px; height: 280px; perspective: 800px; text-decoration: none; }
.d32 .cv { position: relative; display: grid; align-content: end; width: 140px; height: 200px; padding: 14px; box-sizing: border-box; background: linear-gradient(160deg, #0f766e, #134e4a); color: #ccfbf1; font: 13px Inter, system-ui, sans-serif; transform: rotateY(-30deg); transform-style: preserve-3d; transition: transform .5s ease; box-shadow: 10px 12px 24px -10px #000; border-radius: 2px 6px 6px 2px; }
.d32 .cv::before { content: ""; position: absolute; top: 3px; right: -20px; width: 20px; height: calc(100% - 6px); background: repeating-linear-gradient(90deg, #f8fafc 0 2px, #cbd5e1 2px 3px); transform-origin: left; transform: rotateY(90deg); }
.d32 b { color: #fff; font-size: 17px; line-height: 1.2; } .d32 small { margin-top: 4px; }
.d32:hover .cv, .d32:focus-visible .cv { transform: rotateY(-8deg); }
.d32:focus-visible { outline: 2px solid #5eead4; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .d32 .cv { transition: none; } }

03. Folded Paper Corner

3DPaper

A note card with its top-right corner folded down, giving a paper feel. The fold is a triangle made by a two-colour linear gradient on a pseudo-element, with a small shadow so it lifts off the card.

View code

<article class="d33"><h3>Remember</h3><p>Water the herbs on Thursday.</p></article>

.d33 { position: relative; width: 220px; max-width: 100%; padding: 20px; box-sizing: border-box; background: linear-gradient(225deg, transparent 22px, #fef9c3 22px); color: #713f12; font: 14px "Comic Sans MS", "Segoe Print", Inter, sans-serif; filter: drop-shadow(0 6px 8px rgba(0,0,0,.15)); }
.d33::before { content: ""; position: absolute; top: 0; right: 0; width: 31px; height: 31px; background: linear-gradient(225deg, transparent 50%, #fde68a 50%); box-shadow: -2px 2px 3px rgba(0,0,0,.12); }
.d33 h3 { margin: 0 0 6px; font-size: 18px; } .d33 p { margin: 0; }

04. Text in Perspective

3DTypography

A headline laid back into the distance like a title crawl, using perspective on the parent and rotateX on the text, with a gradient mask fading the far edge. The text stays real and selectable.

View code

<div class="d34"><p>A long time ago, in a design system far, far away, every button had its own shade of blue.</p></div>

.d34 { width: 280px; max-width: 100%; height: 200px; overflow: hidden; perspective: 260px; -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); }
.d34 p { margin: 0; color: #fde047; font: 800 22px/1.3 Inter, system-ui, sans-serif; text-align: justify; transform: rotateX(30deg) translateY(10px); transform-origin: 50% 100%; }

05. Deep Press Button

3DButton

A thick button whose side is a solid darker layer underneath, built from an outer element (the side) and an inner face that moves down on press. The face travels most of the depth, so pressing it feels mechanical.

View code

<button class="d35"><span>Order now</span></button>

.d35 { padding: 0 0 8px; border: 0; border-radius: 14px; background: #9a3412; cursor: pointer; }
.d35 span { display: block; padding: 14px 28px; border-radius: 14px; background: #f97316; color: #fff; font: 800 16px Inter, system-ui, sans-serif; transform: translateY(-8px); transition: transform .08s; }
.d35:hover span { transform: translateY(-10px); } .d35:active span { transform: translateY(-2px); }
.d35:focus-visible { outline: 3px solid #fdba74; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .d35 span { transition: none; } }

06. Shaded Sphere

3DGradient

A convincing ball from one element: an off-centre radial gradient for the highlight, a darker edge for the shadow side and an ellipse shadow on the ground. Moving the highlight's position moves the apparent light source.

View code

<div class="d36" role="img" aria-label="A shaded blue sphere"><span class="b"></span><span class="s"></span></div>

.d36 { display: grid; justify-items: center; gap: 4px; }
.d36 .b { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0f2fe 0, #38bdf8 25%, #1d4ed8 60%, #172554 100%); }
.d36 .s { width: 100px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }

07. Stacked Layers Card

3DLayers

A card with two offset copies of itself behind it in lighter shades, like a neat stack of paper. The copies are hard-edged box-shadows with spread, so there are no extra elements and they follow the card's border radius.

View code

<article class="d37"><h3>Q4 planning</h3><p>3 documents</p></article>

.d37 { width: 200px; max-width: 100%; margin: 0 20px 20px 0; padding: 18px; box-sizing: border-box; border: 1px solid #c7d2fe; border-radius: 14px; background: #fff; box-shadow: 8px 8px 0 -1px #eef2ff, 8px 8px 0 0 #c7d2fe, 16px 16px 0 -1px #e0e7ff, 16px 16px 0 0 #a5b4fc; font: 14px Inter, system-ui, sans-serif; }
.d37 h3 { margin: 0 0 4px; color: #1e1b4b; } .d37 p { margin: 0; color: #4338ca; }

About these CSS 3D Effects

Real 3D or faked depth

Some effects use true 3D transforms with perspective and preserve-3d; others fake depth with gradients and shadows. Faked depth is cheaper and never distorts text.

Light from one direction

Pick a light source, usually top left, and keep every highlight and shadow consistent with it. Mixed light directions make 3D look wrong even when the shapes are right.

Side faces from pseudo-elements

Rotate ::before and ::after 90 degrees from an edge to build the sides of a block or the spine of a book, so one element becomes a solid.

Keep text flat

Text in heavy perspective is hard to read. Use 3D for shapes and decoration, and keep body text facing the reader.

Frequently asked questions

Do 3D transforms work everywhere?

Yes, in all current browsers.

Is 3D bad for performance?

Static 3D transforms are cheap. Animating large 3D scenes needs care on phones.

Should 3D move for reduced motion?

Static depth is fine; turn off animated rotations under prefers-reduced-motion.