Engrave

Shadow & Press · Static · pure CSS

Letters carved into the surface — a low-contrast fill with a shadow on top and a highlight below (the inverse of emboss). Debossed and tactile.

Open in the generator →All effects
Engrave

CSS

/* Engrave — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Anton', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  color: hsl(73 10% 26%);
  text-shadow: 0 -1px 1px hsl(73 30% 4% / 0.8), 0 1px 0 hsl(73 15% 55% / 0.45);
}

Pure CSS — just add the .text-effect class to any element.

Category
Shadow & Press
Type
Static
Browser support
All modern browsers
Capabilities
pure

Related Shadow & Press effects