Design Atlas
한국어
✦ Visual effects

Letterpress text

레터프레스(음각) 텍스트

A very subtle two-shadow trick that makes text look gently pressed into the surface — a look common in early iOS and macOS UI text.

Also known as: Embossed textDebossed textInset text shadow
···
html
<div class="panel"><span class="word" id="w">PRESS</span><small id="cap">pressed</small></div>
css
.panel{display:grid;place-items:center;gap:10px;background:#dfe3ea;padding:34px 46px;border-radius:18px}
.word{font-size:clamp(24px,7vmin,34px);font-weight:800;color:#dfe3ea;letter-spacing:.02em;
  font-family:Arial,Helvetica,sans-serif;transition:text-shadow .6s;
  text-shadow:0 1.5px 1px rgba(255,255,255,1),0 -1.5px 1px rgba(0,0,0,.4)}
.word.raised{text-shadow:0 -1.5px 1px rgba(255,255,255,1),0 1.5px 1px rgba(0,0,0,.4)}
#cap{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#6b7280;
  letter-spacing:.08em;text-transform:uppercase}
js
const w = document.getElementById('w');
const cap = document.getElementById('cap');
setInterval(() => {
  w.classList.toggle('raised');
  cap.textContent = w.classList.contains('raised') ? 'raised' : 'pressed';
}, 2200);

When the text colour is close to the background, a light text-shadow offset 1px down (and a dark one 1px up) makes the letter's bottom edge look lit and its top edge look shadowed — reading as pressed into the surface rather than sitting on it.

It's the visual opposite of neumorphism's "raised" look, and it only works subtly — 1px offsets, low opacity. Push it further and it just reads as a blurry double shadow.

When to use

Use for headers on a same-tone background, skeuomorphic UI revivals, card labels. In dark mode the light/dark order needs flipping to look right.