Create Text with Background Images and Colors

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