So you want a text gradient, huh?

I see text gradients all over IJ, from dropbox posts to Generator topbars, and you know what they all have in common? They're ridiculously tedious to edit. Every time I see a text gradient done by defining each letter's color I die a little bit inside (the more letters I know you had to sit and edit the more I feel for you), so today we're going to learn the right way to do it!*

Here's the best part: Your text goes all in one line as usual. No color picking, no letter-by-letter faux-gradienting. Just a little bit of CSS and your display text. Let's get started!

*Except in a few very specific instances, but we won't get into that right now.

Yes, you really can do this.

So you're excited to ditch the old method and maybe a little skeptical; it can't possible be as easy as I'm making it sound, right? WRONG-O FRIENDS. Once we break down how this is done you'll be gradient-texting away like a pro without ever having to work piece by piece again. Ya welcome. I love you.

The two magical pieces needed to make this work background-clip and a background-image CSS gradient. If you think that sounds like it has a lot more potential than just a color gradient, you're right. I'll be showcasing that for you guys in a layout this month! But I'm getting ahead of myself.

What do these things do? To put it as simply as possible, background-clip specifies the boundaries of your background, and in this case we're setting it to text which, you guessed it, tells it its boundary is the text. When we couple that with background-image and slap in a gradient...

Well, I'm sure you know what happens next. Now let's see it in action!

How to set it up!

Whether you want a contact code with an icon or a header on your journal layout, setting this up is fairly simple. Here is the breakdown of what you need to make it function, as well as information on text options:

<div style="

<!---THIS IS YOUR FONT STYLE; IT CAN BE ANYTHING YOU WANT AND DOES NOT EFFECT THE GRADIENT IN ANY WAY AS LONG AS YOU DO NOT DEFINE A FONT COLOR--->text-align:center;
font-family:arial black,gadget,sans-serif;
font-size:28px;
text-transform:uppercase;<!---THIS ALLOWS THE GRADIENT TO SHOW UP INSIDE OF YOUR TEXT--->color:transparent;<!---THIS IS YOUR CLIPPING; IT WILL TELL THE BACKGROUND TO CLIP ITSELF TO THE TEXT AND YOU SHOULD NOT NEGLECT THE VENDOR PREFIXES FOR CROSS-BROWSER SUPPORT--->-webkit-background-clip:text;
background-clip:text;<!---THIS IS YOUR GRADIENT; IT MUST BE BACKGROUND-IMAGE AND YOU SHOULD NOT NEGLECT THE VENDOR PREFIXES FOR CROSS-BROWSER SUPPORT--->background-image:-moz-linear-gradient(left, #a90329 0%, #d604ba 50%, #6500ea 100%);
background-image:-webkit-linear-gradient(left, #a90329 0%,#d604ba 50%,#6500ea 100%);
background-image:linear-gradient(to right, #a90329 0%,#d604ba 50%,#6500ea 100%);

">
A Simple Example Title
</div>

Using the above code with the same font specs and gradient gives you this:

A Simple Example Title

That's all there is to it! You could even use this clip text method to replace journal entry titles in your layout CSS!* And I didn't have to wrap a single letter inside of a span or font tag to define its color! I don't wanna know how long this would take with the alternative.

This isn't really a tutorial on how to make gradients, so I recommend just finding the gradient generator that works for you! I usually use Colorzilla. Just make sure you stick to this format:

*Please note that this method does restrict you from using text-shadow in conjunction with it due to the color:transparent; declaration. There is a workaround using :after in your layout's CSS, but I won't get into that unless someone asks for it in the comments.

We did it! Now for some examples.

I've got two entry codes and an example for layout elements below--you honestly can use this for any text, so go nuts! Feel free to use these codes on your journals if you like any of my examples; credit's already in place! ♥

VIEW CSS
This coding is for layout examples, so I've left some stuff blank so you can take the CSS and input it into whatever classname is available in your layout type (usually Generator or Complete Style.)