Wie kann man mit CSS einen Knockout- oder Cutout-Text-Effekt erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .backdrop {
      background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center;
      background-size: contain;
      margin: auto;
      margin-top: 50px;
      width: 600px;
      }
      .text {
      font: bolder 16vw "Alfa Slab One";
      text-align: center;
      margin: 0;
      border: 6px solid;
      animation:  glow 3s infinite;
      }
      @keyframes glow {
      0% {
      text-shadow:  0 0 10px white;
      }
      15% {
      text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
      -2px -2px 10px rgba(255, 255, 255, 1);
      }
      30% {
      text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
      -2px -2px 4px rgba(255, 255, 255, .7);
      }
      50% {
      text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
      -20px -20px 50px rgba(255, 255, 255, .5);
      }
      }
      .darken {
      color: white;
      mix-blend-mode: darken;
      background-color: rgba(59, 2, 6, 1);
      }
    </style>
  </head>
  <body>
    <div class="backdrop">
      <p class="text darken">NATUR</p>
    </div>
  </body>
</html>