Textured Text Effect with CSS

You can add a textured text effect with CSS using a few vendor-specific properties, along with an image that will be used as a background to create the textured effect.

This kind of textured effect with CSS works best when using a thick, block-type font but you can experiment with other fonts as well. In this snippet, I’ll be using a free font called Archivo Black.

Here is the CSS code:

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11vw;
  margin: 6vw;
  line-height: 10vw;
  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;
  background-image: url(../img/texture.png);
}
Code language: CSS (css)

Be sure to change the background image URL to point to your own textured image. You can also fiddle around with the font-size and the background-size values. This can change where the background image appears in relation to the text, providing subtly different textured effects.

Note that the code uses vendor-prefixed CSS that, as of this writing, is required in order to ensure the textured effect works in the most browsers.