CSS Tips : Color text using image

How to color text in html using css and a image.

Let’s look at a simple bit of css that will allow us to color regular text using a image. Sure, you can set a text color using css, but with this simple technique, the text will adopt the color of the image you use.

You can see here the colors of the image coming through.

Here is the very simple css to make this effect.

.text {
      background-image: url('background.jpg');
      background-clip:text;
      -webkit-background-clip:text;
      color:transparent;
      font-size:150px;
}

Obviously you’ll want to set your own image filename as well as the font size and any other parameters you want. The first 4 lines of the css style is what makes the effect happen.

Full code example