Text with a Background-Gradient
Text can be filled with a background-gradient. This is actually a bit more complex than it sounds, but creates a really nice effect. Several things must happen.
WARNING: There is an odd bug in iOS devices. Do NOT combine this technique with flexbox. Rather, create a separate class to contain flexbox or other formatting options; limit the class containing the gradient text or image background to only the required CSS.
- Create an element that can use a background gradient.
- Deal with alignment as desired.
- Create a background-image and set this to a gradient.
- Use the background-clip: text attribute (along with the -webkit-background-clip variation) to limit the background to the text.
- Set the text color to be transparent.
.gradient-text {
font-size: clamp(1em, 10vw, 8em);
background-image: linear-gradient(to right, red, black);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
If there's insufficient text, the user may not notice the gradient effect.
Gradient Text
Repeating-Linear-Gradient Text
This can create some really unusual effects.
.repeating-gradient-text {
font-size: clamp(1em, 10vw, 8em);
background-image: repeating-linear-gradient(to right, red, black 20px);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Repeating Gradient Text
.repeating-gradient-text2 {
font-size: clamp(1em, 10vw, 8em);
background-image: repeating-linear-gradient(-60deg, teal, black, teal 10px);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
Repeating Gradient Text
Text with an Image Background
There are at least three approaches to creating text filled with an image!
- Use photo editing software.
- Use the mask image attribute.
- Use the background-clip attribute.
Creating text with an image background using background-clip uses an approach very similar to creating text with a gradient fill!
.image-text {
font-size: 8em;
background-image: url(header.jpg);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
