embossed lettering

by jorgeluis

HTML

<h1>
HERE
</h1>

<p>
The font color is transparent, allowing the background color/gradient mix to show through using background-clip: text. The text-shadow property adds subtle edges.
</p>

CSS

body {
  background:#eee;
  text-align: center;
}

h1 {
  font-size: 15em;
  font-family: Impact, sans-serif;
  background-color: #eee;
  background-image: linear-gradient(rgba(150, 150, 150, 0.2), rgba(150, 150, 150, 0.5));
  color: transparent;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}