Engraved And Embossed Text

A carved or raised look faked with a single one-pixel text-shadow, no blur.

In 2026: A one-pixel light highlight directly below dark text reads as engraved, and a one-pixel light highlight directly above near-background text reads as raised. There is no blur, so it is a crisp offset, not the blurred bloom of a glow. Browsers render it identically today.

Where it came from: The letterpress text technique, popularised on CSS-Tricks and Web Designer Wall around 2010, once text-shadow was widely supported. MDN ↗

<style>
.press {
  background: #d3d7de; color: #4a4f57;
  font: bold 2.2rem/1.4 Arial, sans-serif;
  text-align: center; padding: 22px;
  text-shadow: 0 1px 0 #ffffff;
}
.emboss {
  background: #2b2f36; color: #2f333b;
  font: bold 2.2rem/1.4 Arial, sans-serif;
  text-align: center; padding: 22px;
  text-shadow: 0 -1px 0 rgba(255,255,255,.45);
}
</style>

<p class="press">ENGRAVED</p>
<p class="emboss">EMBOSSED</p>