<main>
  <h1 class="one">Textured Text</h1>
  
  <h1 class="two">Another Example</h1>
  
  <h1 class="three">Third Example</h1>
</main>
@import url(https://fonts.bunny.net/css?family=abeezee:400|archivo-black:400);

body {
  padding: 1vw;
  background: #fefefe;
  text-align: center;
}

main {
  font-size: 1em;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11vw;
  font-family: "Archivo Black", sans-serif;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 6vw;
  line-height: 10vw;
}

.one {
  background-image: url(https://www.codeinwp.com/wp-content/uploads/2023/02/texture1.png);
}

.two {
  background-size: contain;
  background-image: url(https://www.codeinwp.com/wp-content/uploads/2023/02/texture2.png);
}

.three {
  background-size: contain;
  background-image: url(https://www.codeinwp.com/wp-content/uploads/2023/02/texture3.png);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.