Css image mask to create gritty overlays

Css-image-mask-to-create-gritty-overlays-.markdown

Css image mask to create gritty overlays

A Pen by Amando Filipe on CodePen.

License.

index.html

<div>
  <h1>Gritty Grit</h1>
</div>

style.css

div{
  position: absolute;
  top: 50%;
  width:100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

h1{
  font-family:Verdana;
  text-align:center;
  font-size:150px;  
  color:green;
  mask-image: url('https://i.imgur.com/JMIX04V.png');
  -webkit-mask-image: url('https://i.imgur.com/JMIX04V.png');
}