css/styling-boxes/advanced_box_effects/background-clip-text.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>CSS filters examples</title>
    <style>
    html {
      font-family: impact, sans-serif;
    }

    h2 {
      width: 250px;
      height: 250px;
      text-align: center;
      line-height: 250px;
      font-size: 75px;
      display: inline-block;
      background: url(colorful-heart.png) no-repeat center;
    }

    .text-clip {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    

    </style>
  </head>
  <body>
    <h2>WOW</h2>
    <h2 class="text-clip">WOW</h2>   
  </body>
</html>