Example of multiply, screen, darken, lighten cutout texts "Nature"|CSS Snippet|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .backdrop {
        background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") center;
        background-size: contain;
        margin: auto;
        margin-top: 30px;
        width: 600px;
      }
      .text {
        font: bolder 16vw "Alfa Slab One";
        text-align: center;
        margin: 0;
        border: 6px solid;
      }
      .multiply {
        color: white;
        mix-blend-mode: multiply;
        background-color: rgba(59, 2, 6, 1);
      }
      .screen {
        color: black;
        mix-blend-mode: screen;
        background-color: rgba(244, 220, 211, 1);
      }
      .darken {
        color: white;
        mix-blend-mode: darken;
        background-color: rgba(59, 2, 6, 1);
      }
      .lighten {
        color: black;
        mix-blend-mode: lighten;
        background-color: rgba(245, 220, 211, 1);
      }
    </style>
  </head>
  <body>
    <p>Multiply</p>
    <div class="backdrop">
      <p class="text multiply">NATURE</p>
    </div>
    <p>Screen</p>
    <div class="backdrop">
      <p class="text screen">NATURE</p>
    </div>
    <p>Darken</p>
    <div class="backdrop">
      <p class="text darken">NATURE</p>
    </div>
    <p>Lighten</p>
    <div class="backdrop">
      <p class="text lighten">NATURE</p>
    </div>
  </body>
</html>