Skip to content

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.

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
View all Snippets
Louis Lazaris
Share:

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x