Design Atlas
한국어
✦ Visual effects

Extruded text

익스트루드 텍스트

Stacking a tight trail of shadow layers straight behind text so the letters read as solid, three-dimensional blocks with real thickness.

Also known as: 3D textBeveled textBlock letters
···
html
<div class="stage3d"><h1 class="ext">3D</h1></div>
css
.stage3d{perspective:600px}
.ext{margin:0;font-size:clamp(70px,22vmin,110px);font-weight:900;color:#ffd23f;
  font-family:Arial,Helvetica,sans-serif;transform-style:preserve-3d;animation:tilt 4s ease-in-out infinite;
  text-shadow:0 1px 0 #d1a220,0 2px 0 #c49a1e,0 3px 0 #b8911c,0 4px 0 #ab871a,0 5px 0 #9e7e18,
    0 6px 0 #927416,0 7px 0 #856b14,0 8px 0 #786112,0 9px 0 #6c5810,0 10px 0 #5f4e0e,0 11px 0 #524508,
    0 14px 18px rgba(0,0,0,.5)}
@keyframes tilt{0%,100%{transform:rotateX(24deg) rotateY(-8deg)}50%{transform:rotateX(24deg) rotateY(8deg)}}

Where a long shadow stretches far at 45 degrees, extruded text stacks a shadow tightly behind the letters — usually straight down — only as far as the desired thickness, so it reads as a solid block cut from stock. Darkening that side colour in steps sells a light source hitting it from an angle.

Adding perspective and a 3D rotateX/rotateY transform tilts the letters as if a real camera were looking at them, revealing more of that thickness.

When to use

Use for game titles, brutalist headlines, retro badge logos. Avoid body text — the thick shadow hurts legibility.