Gradient-colored Text

Text can be colored with horizontal or vertical color gradients. My own book Sadine; The Magic Elf is used to demonstrate how it can be done.

Note that the font used on the book cover is unlikely to be immediately available on every reader's computer. Thus, the CSS for the font in the article examples is font-family:"Brush Script MT"; and font-weight:bold;. Brush Script MT should be a web-safe font.

The idea for this article is how to do the color gradient, not necessarily to match the font.

Therefore, let's do it. Here is the example we'll work with.

Here is the source code for the above. Following that, we'll go through each of the CSS declarations the source code presents.

<style type="text/css">
.text-color-gradient {
    background:linear-gradient(to right, hsl(140, 100%, 55%), hsl(240,100%,30%), hsl(140, 100%, 55%));
    background-clip:text;
    color:transparent;
    font-family:"Brush Script MT";
    font-weight:bold;
}
</style>
<div class="text-color-gradient" style="display:table; font-size:1in;">
Sadine
</div>

Let's address the CSS in the above source code:

background:linear-gradient(...) puts a color-gradient into the div as a background. If you didn't have any other of the example CSS in place, you would get only a box with a color gradient. Like this:

The CSS Color Gradients article has more information about linear gradients.

The next two CSS declarations work together to remove all of the background except what is behind the text: background-clip:text and color:transparent

background-clip:text removes the background that would show outside the text. color:transparent makes the text transparent so the background remaining behind the text can show through.

Note, if you expect older versions of browsers to view the web page with color-gradient text, then add -webkit-background-clip:text to the style so those folks can see the effect, too.

The font-family and font-weight CSS properties specify the font and weight.

You now have the tools you need to make color-gradient text.

To visualize how the browser constructs the color-gradient text, first visualize a div with a color-gradient background. Then visualize the background showing through the text within the div. Last, visualize all the background around the text gone poof.

That's pretty much how it works.

Will Bontrager