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.

The CodePen demo below shows three different examples using the same font but with a different image-based texture for each.