<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;
background-clip: text;
background-clip: text;
text-fill-color: transparent;
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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.