3D text effect: extruded lettering done tastefully

A 3D text effect makes flat letters look solid by adding sides, as if each letter were cut from a block and seen slightly from an angle. Done tastefully, it uses a heavy face, a short depth of about 5 to 10 percent of the letter height, one consistent direction, and side colours taken from a darker tone of the background. Done badly, it uses gradients, glossy highlights, long depths and several directions at once. Keep it simple and extruded type looks like a confident sign rather than clip art.

What makes extruded text look good or cheap

Extrusion has a long history in hand painted signs, circus posters and 1970s record sleeves. That history is why it reads as warm and a little nostalgic. Lean into that for cafés, ice cream, kids' brands, music and events. For a calm, minimal brand, it's usually the wrong voice; text effects helps choose one that fits.

Choosing depth, direction and colour

Depth

The sides should be shorter than the letter strokes are wide. On a 160 px headline, a depth of 8 to 16 px reads as solid; 40 px starts to look like a long shadow, which is a different style. Small text can't carry depth at all, so keep extrusion to headline sizes.

Direction

Pick one direction and keep it across every design. Down and to the right is the most natural, because we tend to read light as coming from above and to the left. Straight down feels like stacked blocks. Up and to the left feels unusual, which can work for a single statement but tires quickly.

Colour

Three tones do all the work: the letter face, the side and the ground. The face should contrast strongly with the ground. The side sits between them, usually a deep shade of the ground or of the face. Taking it from the background makes the extrusion feel lit by the same light.

How to make a 3D text effect in CSS

CSS has no extrude property, but stacked shadows do the job. Each layer of text-shadow is a solid copy of the letters, offset one pixel further, with no blur. Stack enough of them and the copies merge into solid sides. A final, softer shadow underneath grounds the letters on the page.

.extruded {
  font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */
  font-size: 10rem;
  line-height: 1;
  color: #fff1d6;
  text-shadow:
    1px 1px 0 #c2410c,
    2px 2px 0 #c2410c,
    3px 3px 0 #c2410c,
    4px 4px 0 #c2410c,
    5px 5px 0 #c2410c,
    6px 6px 0 #c2410c,
    7px 7px 0 #c2410c,
    8px 8px 0 #c2410c,
    10px 12px 10px rgb(67 20 7 / 0.35);
}

Writing dozens of layers by hand is tedious. A few lines of JavaScript produce the list for any depth, direction and colour, which you can paste into your stylesheet.

// Build a text-shadow value for an extrusion
function extrude(depth, color, dx = 1, dy = 1) {
  const layers = [];
  for (let i = 1; i <= depth; i++) {
    layers.push(`${i * dx}px ${i * dy}px 0 ${color}`);
  }
  return layers.join(", ");
}

console.log(extrude(12, "#1e3a8a"));        // down and right
console.log(extrude(10, "#1e3a8a", 0, 1));  // straight down

Keep extruded headings as real text on a website, so they stay searchable, selectable and readable by screen readers. The shadows don't change the measured contrast between letter and background, so make sure the face colour passes on its own. If you prefer a lighter, graphic version, a single hard shadow with no layers is covered in text shadows; for true 3D with lighting and rotation, you are into WebGL territory, which shader gradients introduces.

Making extruded lettering step by step

1. 1

   Choose two to four words

   A shop name, a single offer, an event title. Extrusion needs space around it.

2. 2

   Set them in a heavy face

   A black weight sans or slab, or a soft retro serif. Retro fonts suggests a few with the right warmth.

3. 3

   Pick face, side and ground colours

   Strong contrast between face and ground; the side a darker tone of the ground.

4. 4

   Add depth in one direction

   Start around 6 percent of the letter height, down and right. Increase only if it still looks flat.

5. 5

   Keep everything else flat

   Details, dates and prices in a plain, solid sans with no effect.

Extruded type in Gradiently

Extrude is one of Gradiently's Lettering treatments: it gives any text in the Studio solid depth down and to the right, with sides drawn in the Mark's own colours and a dial for depth, so there are no layers to stack. The Mark behind the design moves its calmest area behind the words, so extruded lettering stays legible however the background shifts across the frame. The outline text effect and other treatments are in the same menu if extrusion turns out to be too loud for the message.