JSFiddle - React, Tailwind, and code Playground

by Андрей Хамедов

HTML

<h1><a href="#">Filthy</a></h1>

CSS

h1 {
  position: relative;
  font-size: 300px;
  line-height: 300px;
  text-shadow: -3px 0 4px #006;
  }
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  position: absolute;
  top: 0; z-index: 2;
  color: #d12;
  -webkit-mask-image: -webkit-gradient(linear, left top, »
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }
h1:after {
  content: "Filthy";
  color: #000;
  text-shadow: 3px 3px 1px #600;
  }