Tessisamess

How to Make a Text Gradient



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:
background-image:MOZGRADIENT; background-image:WEBKITGRADIENT; background-image:DEFAULTGRADIENT;
*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! ♥

Character Name
CONTACT / ABOUT / VISUALS / PLAYLIST / ©
VIEW CODE
<lj-raw><div style="margin:0 auto;width:385px;text-align:center;font-family:helvetica,arial,sans-serif;font-size:9px;letter-spacing:2px;display:flex;align-items:center;">

<img src="USERPIC" style="width:60px;height:60px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);margin-right:15px;">

<div style="width:300px;"><div style="font-family:arial black,gadget,sans-serif;font-size:25px;text-transform:uppercase;letter-spacing:1px;color:transparent;-webkit-background-clip:text;background-clip:text;

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%);

">Character Name</div>

<a href="" style="color:#000;text-decoration:none;">CONTACT</a> / 
<a href="" style="color:#000;text-decoration:none;">ABOUT</a> / 
<a href="" style="color:#000;text-decoration:none;">VISUALS</a> / 
<a href="" style="color:#000;text-decoration:none;">PLAYLIST</a> / 
<a href="http://tessisamess.insanejournal.com/" style="color:#000;text-decoration:none;">&copy;</a>

</div></div></lj-raw>
Character Name
CONTACT / ABOUT / VISUALS / PLAYLIST / ©
VIEW CODE
<lj-raw><div style="width:300px;margin:0 auto;font-family:helvetica,arial,sans-serif;font-size:9px;letter-spacing:2px;text-align:center;">

<img src="USERPIC1" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC2" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC3" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<img src="USERPIC4" style="width:30px;height:30px;border-radius:100px;padding:3px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);">

<div style="font-family:arial black,gadget,sans-serif;font-size:27px;text-transform:uppercase;letter-spacing:1px;color:transparent;-webkit-background-clip:text;background-clip:text;

background-image:-moz-linear-gradient(left, #d8343f 0%, #300008 100%);background-image:-webkit-linear-gradient(left, #d8343f 0%, #300008 100%);background-image:linear-gradient(to right, #d8343f 0%,#300008 100%);

">Character Name</div>

<a href="" style="color:#000;text-decoration:none;">CONTACT</a> / 
<a href="" style="color:#000;text-decoration:none;">ABOUT</a> / 
<a href="" style="color:#000;text-decoration:none;">VISUALS</a> / 
<a href="" style="color:#000;text-decoration:none;">PLAYLIST</a> / 
<a href="http://tessisamess.insanejournal.com/" style="color:#000;text-decoration:none;">&copy;</a>

</div></lj-raw>
PRETEND THIS IS A JOURNAL ENTRY
Donec rutrum vel magna sit amet pretium. Mauris non viverra ipsum. Quisque malesuada enim ac elit vulputate euismod sit amet sit amet arcu. Phasellus volutpat odio sapien. Quisque in hendrerit dolor. Aenean et nulla et elit elementum pulvinar. Donec vitae magna eget augue fermentum fermentum. Nulla ornare urna eget sapien vestibulum, quis lacinia metus tempus. Nulla consequat convallis nibh, eu eleifend arcu. Curabitur sit amet blandit leo, eget luctus tortor. Mauris vitae euismod lectus. Pellentesque a magna porta, tristique orci id, pharetra massa. Cras ac nisi tellus. Sed laoreet lectus tempus quam fringilla, nec pretium mi volutpat. Donec malesuada bibendum euismod. Aenean mollis quam vel lorem fermentum.
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.)

.ENTRYTITLECLASSNAME{
font-family:arial black,gadget,sans-serif; font-size:22px; text-transform:uppercase; color:transparent; -webkit-background-clip:text; background-clip:text; background-image:-moz-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:-webkit-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:linear-gradient(to right, #ff3f3f 0%,#ffbf3f 25%,#cfff3f 50%,#49ff3f 75%,#00f6ff 100%);
} .COMMENTCLASSNAME{
font-family:arial black,gadget,sans-serif; font-size:12px; text-transform:uppercase; text-align:right; color:transparent; -webkit-background-clip:text; background-clip:text; background-image:-moz-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:-webkit-linear-gradient(left, #ff3f3f 0%, #ffbf3f 25%, #cfff3f 50%, #49ff3f 75%, #00f6ff 100%); background-image:linear-gradient(to right, #ff3f3f 0%,#ffbf3f 25%,#cfff3f 50%,#49ff3f 75%,#00f6ff 100%);
} .COMMENTCLASSNAME a{
color:transparent;
}


♡ You're Done! ♡

Tags:

Comments

From:
(will be screened)
(will be screened)
Identity URL: 
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.