. : May 9, 2015 : .

Text-Gradiator: Put Gradients on Your Text

Maybe I’m weird, but I kind of like the way gradients look on text. Don’t you? I mean, when it’s done right, of course!

It’s pretty easy to do in CSS for webkit browsers:

.gradient{
  background: -webkit-linear-gradient(#00ff00, #15bb55);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

You’ll end up with something looking like this:

Hooray for webkit browsers! I applaud their grooviness. Now, let’s see what happens if we add a text-shadow to it:

text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);

That went from cool to poo-in-the-pool real quick didn’t it? :(

The shadow looks like it’s on top of the text. This is because the text fill color is actually transparent, and the color you see is actually the background of the element. It’s ugly, ugly, ugly!

Also, if someone views your gradient text in a non-webkit browser, they will see something like this:

Wah wah wah…

At this point some of you are saying, “Maybe we just shouldn’t use gradients on text in the web. We don’t really NEED them anyway, right? We can still make our sites look spiffy without it.”

Well, allow me to disagree! This aggression will not stand! Those gradients really held the site together, did they not?

So, how do we overcome this?

Make an image for every text element we want to have a gradient applied? Well, you could, but that would be a lot of work, and it would take a big runny dump on your SEO.

You might be asking, “Did you have something else in mind?” Why yes. Yes, I do.

Introducing Text-Gradiator!

Instead of using images or just not using gradients altogether, let’s draw the text in a canvas element. “But, that’s kind of a lot of work too!” you might be thinking as you roll your eyes. Well, it used to be, until I created this handy dandy polyfill/plugin/piece of code called Text-Gradiator!

Text-Gradiator makes it ridiculously easy to add a gradient to any line of text in your web page. Just include the script in your page:

<script src="js/text-gradiator.js"></script>

Then, initialize it:

var gradiator = new Gradiator();

And then turn it loose!

// assign gradient to all elements with the .gradient class
gradiator.gradiate('.gradient', '#00ff00', '#15bb55', false);

// assign to a specific element whit its ID set to "grade-me"
gradiator.gradiate('#grade-me', '#ff6600', '#AA3300', false);

You’ll end up with something like this:

OOOOOOH!! AAAAAAAH!!!

I’ll briefly explain the parameters of the ‘gradiate’ function. the first param is either the class name or ID of the element(s) you want to have gradients applied to.

The second parameter is the top color, the third is the bottom color. These are all strings.

The fourth parameter is a boolean to let your gradiator instance know if you want it to attempt to use CSS to perform the gradient. It’s optional and defaults to true. If you don’t add it, gradiator will attempt to use CSS to make your gradient and fall back to drawing it in the canvas if the page is not being viewed by a super cool webkit browser.

“Why would I ever want to set that to false then?!?”

For a couple of reasons:

You might want to have a text-shadow applied to your text element without it looking like garbage.
Your element might have a lot of padding on the top and/or bottom. That will mess up your gradient because the gradient will span the whole height of your element, but will only be visible in the areas where your text is. This can make your gradient seem less potent.

How it works

Text-Gradiator uses creates a canvas element for every text element you specify to receive a gradient, unless CSS is determined to be a viable option, that is. It then assigns many of the pertinent properties of the text element to the canvas element, such as float, display, position, font-family, etc. Finally, it fills the text with the gradient, and sets the original text element’s display property to ‘none’, and PRESTO! You have yourself some mighty fine looking text with a gradient applied to it!

Wrapping it up

So, now we can put beautiful gradients on our text in all kinds of different browsers. Text-Gradiator is pretty small (7KB uncompressed at the time of this writing), and it doesn’t depend on anything like jQuery. Also, I don’t believe it will affect SEO, because it’s applied on the front-end after the page is loaded. I haven’t verified that yet, though. Also, at the time of this writing, it only supports top-to-bottom linear, two color gradients, none of those crazy circular or triple+ gradients. If you’d like to fork the project, and add that, be my guest!

Thanks for reading!