letterpress text-shadow effect
Letterpress is a 19th-century printing technique where raised type presses into paper, leaving each letter slightly sunken with a light edge on one side and a shadow edge on the other. CSS recreates that impression with two opposing text-shadow layers, no image and no filter, and this page walks through the physics behind those two shadows.
The text color sits only one shade lighter than the background, and the two shadows without blur build the thin groove typical of printed headings.
Swapping which shadow sits on top flips the relief reading, simulating the letter pushed into the dark background instead of pushed out of it.
A 1px blur softens the shadow transition on large fonts, where the hard edge of a zero blur becomes too visible up close.
Yes. The property takes a comma-separated list, painted front to back, the first shadow sits on top. That is how multi-layer outlines and glows are created.
Because the relief depends on the eye picking up two subtle light edges around the letter, not a strong outline; if the text has high contrast against the background, the two thin shadows visually disappear behind the main color difference, and the printed groove effect stops showing up.
Technically yes, but the effect only reads well from medium or large headings up, because the two 1px shadows become proportionally huge next to a small letter; on body text the result usually looks like a blurred edge instead of the intended relief.
You need to flip which shadow is light, which is dark, and which sits on top of the list, because the relief depends on the simulated light direction staying plausible; keeping the same light-on-top recipe over a dark background makes the letter look like it is floating instead of sunken.
Only in its final look: the CSS technique presses nothing, it draws two offset shadows to fake the visual read the eye gives a real printed groove, a purely optical effect that imitates centuries of mechanical typography with no physical relief on the screen.
color: #E6ECE8;
text-shadow: 3px 4px 8px #3DDC97,
6px 8px 10px #3DDC97,
9px 12px 12px #3DDC97;CSS is calculated locally; the text is not sent to the server.