Tutorial · Beginner · 6 min

Pillowed & embossed text effects, in pure CSS

This was one of CSS Crème's most-shared tutorials back when "pillowed" type meant a soft inner bevel in Photoshop. Here's the 2026 version: the same emboss, letterpress and debossed looks, in a few lines of CSS, no image editor, infinitely editable.

The one property that does the work

Every effect here is built from text-shadow. The trick is that shadows are layered light: a shadow above-and-left reads as a highlight, a shadow below-and-right reads as a cast shadow, and stacking both gives the illusion of carved or raised type. Because it's text, it stays selectable and razor-sharp at any size.

1. Letterpress (debossed)

The most useful of the family: text that looks gently pressed into the surface. On a light background, a single 1px white shadow below the text fakes the lip of the indentation.

.letterpress {
  color: #b8b2a6;                /* slightly darker than the background */
  background: #e9e4d8;
  text-shadow: 0 1px 0 #fff;     /* the "lip" below the cut */
}

Keep the text color close to the background. The effect lives in the contrast between the two, not in bold color.

2. Emboss (raised)

Flip the highlight above the text and add a soft dark shadow below, and the type lifts off the surface instead of sinking in.

.emboss {
  color: #2a2a2a;
  background: #2f2f2f;
  text-shadow: 0 -1px 0 rgba(255,255,255,.35),
               0 2px 3px rgba(0,0,0,.6);
}

3. The pillowed look (soft inner bevel)

The original "pillowed" effect is a soft, rounded emboss. Recreate it by stacking two low-contrast shadows (a tight one for the edge and a wider, blurred one for the cushion) over a tinted fill.

.pillow {
  color: #6d6a8f;
  background: #ecebf5;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),     /* crisp highlight */
    0 -1px 1px rgba(90,84,140,.45),   /* inner top shadow */
    0 3px 6px rgba(90,84,140,.25);    /* soft cushion */
  font-weight: 800;
}

Heavier weights pillow better. There's more surface for the shadows to wrap.

4. A note on contrast and accessibility

These effects deliberately lower contrast, so reserve them for large display type (headings, logos, hero words), never body copy. Check the readable contrast of the base text color against its background and treat the shadows as decoration, not the thing carrying legibility.

Take it further

Pour a gradient into the letters instead of a flat color with the gradient generator (using background-clip: text), or tint the whole treatment with CSS filters. For more modern type tricks, browse the tutorials.