Create Text with Background Images and Colors

Cascading Style Sheets (CSS) has done much to bring special effects to the web that were previously only available by using an image editing program like Photoshop. One such effect is creating text that looks like it’s cut out of an image.

Here are two examples. The first uses a background image, the second uses a gradient of two colors.

Creating Text with a Background Image:

Background
Image

How is this done?

In our stylesheet, we add the following style to the text:

background-image: url(image.jpg);
background-clip: text;
color: transparent;

Creating Text with a Background Gradient:

Background
Gradient

How is this done?

In our stylesheet, we add the following style to the text

background-image: linear-gradient(135deg, blue, red);
background-clip: text;
color: transparent;

Things to Know

1. This effect works best on fonts with thicker strokes.
2. Use color: transparent; to keep the default text color from covering up the background.
3. Use background-size: contain; to make the backgrounds fit inside the text block. When using gradients, wrap the text in a <span>.

• CSS