If you’re just now becoming familiar with what a gradient is, we’ll paint the picture for you before we dive into the tougher stuff. A gradient is a progression of colors with a starting and stopping point – so, a linear gradient starts with one color (like a red) and gradually transitions in a straight line to another color (like a blue). Like we said in our linear-gradient article, think about sunsets as the best example of a linear gradient and how each color progresses beautifully and seamlessly into the next.
Odds are, you’ve read our awesome article about coding for a linear gradient – what’s that? You haven’t? No worries! Check it out to get a jump start on our gradient conversation. Text gradients aren’t much different! It’s that same idea of a straight line with progressing colors and color stops, but instead of filling a background with the gradient, you’re applying the gradient to specific text! Why Text Gradients MatterCoders and website builders use gradient text all the time, in fact, gradients are one of the latest crazes in website design for a few reasons: they’re easy to implement (once you know what you’re doing, don’t worry, we’ve got you covered) and they have a wonderful visual effect (especially if you have an image-light website). Whether muted text gradients or bright and highly colorful, knowing how to create a gradient pattern with your text is a useful tool for your website.
How to Create a Text Gradient: The Syntax Breakdown
Now that you know why text gradients matter (honestly, they also just look cool), let’s get into the tutorial part of this article. Remember, what you’re ultimately trying to do is use a gradient as a font color in CSS without using images. When it comes to coding and crafting, it’s important to know what you’ll need, so we’ve listed that out below.
What You’ll Need to Know
Breaking down the basics is the first step in figuring out how to construct your text gradient syntax. Check out these keywords to gain a better understanding of what you’ll need to create your text gradient:
Font Size
This one is self-explanatory. You’ll need to set up how large you’d like your font to be before you can set up the rest of your gradient. Working with font size in CSS is based on EMS, pixels, points, and percentages. You might need to look up conversions, but typically you can expect 1em = 12pt = 16px = 100%.
Direction
Your text gradient isn’t so different from your linear gradient, specifically when it comes to direction. You can define the linear gradient angle in the code with a keyword or number and unit. With a keyword, you would use variations of to bottom, to top, to left, and to right to determine where the line should move to from the starting point. These directional keywords can be combined-like to top right or to bottom left-to create a diagonal line. You could also use number and unit pairings to determine the angle and direction of the line.
Colors and Color Stops
In the most basic version of a CSS gradients, you'll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the text gradient. These colors can be set as any type: named, HEX, RGB, or HSL. Because of this, there are a lot of different options when it comes to how your gradient can be shown.
Syntax
The most important part of your CSS gradient text is the actual CSS itself. Check out the basic form of the CSS
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Text Gradients and You
In short, text gradients are a fun, useful way to create engaging designs and eye-catching features for your site. If you want to hop on the gradient-train and want something a little different than radial and linear gradient backgrounds, then gradient text might be the perfect choice for you!If you want to see more cool things that you can do to your text in CSS you should check out this article: CSS text effects: Cool examples that you can download.
