JSFiddle - React, Tailwind, and code Playground

transparent text via svg mask

by CBroe

HTML

<h1>
Text
<svg>
   <!--defs-->
     <mask id="mask">
       <rect width="100%" height="100%" fill="#ccc"></rect>
       <text x=".25em" y="0" /*x/y=padding*/ dy="123" >Text</text>
     </mask>
    <!--/defs-->
    <rect width="100%" height="100%" fill="#f00" mask="url(#mask)"></rect>
  </svg>
</h1>

CSS

html { background:url(http://cdn4.spiegel.de/images/image-1082843-galleryV9-dsng-1082843.jpg); background-size:cover; }
h1 { position:relative; display:inline-block; margin:0; padding:0 .25em; font:bold 7em/1.5 Georgia; color:transparent; }
h1 svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }