Inset text-shadow trick with background-clip

Inset text-shadow trick with background-clip

by denvdmj

HTML

<h1>Inset text-shadow trick</h1>

<h2>Inset text-shadow trick</h2>
<h3>Inset text-shadow trick</h3>
<h4>Inset text-shadow trick</h4>
<h5>Inset text-shadow trick</h5>
<h6>Inset text-shadow trick</h6>

CSS

:root {
  font: 18px/1.5 Roboto, Verdana;
  background: #b8b8b8;
}
h1, h2, h3, h4, h5, h6 {
  
  font-weight: bold;
  line-height: 1em;
  
  background-color: #565656;
  color: rgba(0,0,0,.2);
  text-shadow: 0px 1px 2px rgba(255,255,255,0.5);

  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

h1 { font-size: 6rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; }

::selection {
  background: #c4c4c4;
  color: #fff;
  text-shadow: none;
}