DEV Community

loading...
Cover image for Gradient Text In CSS

Gradient Text In CSS

hadrysmateusz profile image Mateusz Hadryś Originally published at hadrysmateusz.Medium ・3 min read

It can be hard to make a website stand out.

So here’s a little trick that will improve any landing page or header: Use gradient text.

Just make sure to not overuse it. Gradients should never be used for longer text. Instead, use them to make headings or specific words more eye-catching.

What might surprise you — especially if you have prior experience with design tools — is that you can’t set a gradient as the text color directly. For example color: linear-gradient(yellow, red); won’t work.

But gradient text can be achieved in CSS, it just requires a few extra steps.

It’s best to start with some big, preferably bold text. This will make the gradient more visible and the text more readable.

Starting Text - Big, bold and black

The text I’ll be using is styled using the font shorthand with the following values:

font: bold 120px Poppins, sans-serif;
Enter fullscreen mode Exit fullscreen mode

Step 1: Add a Gradient

First, we need to add the gradient as a background.

Text with a top to bottom gradient background

By default the gradient will go from top to bottom, but we can also specify a direction.

If you want a horizontal gradient, to right will do the trick, but a slight angle like 60deg looks more natural.

background-image: linear-gradient(60deg, #E21143, #FFB03A);
Enter fullscreen mode Exit fullscreen mode

Text with a left to right gradient background

If you want to learn how to create any gradient you want, or simply need a refresher, check out my Ultimate Guide to CSS Gradients.

Step 2: Clip It

Now, we need to make the gradient only show where the text is. We can do that by using background-clip.

Four images showing effects of different background-clip values

To learn more about this and other background properties, check out my article explaining all background properties.

You might already know that this property lets us clip the background to the border, padding, or content box of an element.

But it can also clip the background to the text.

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

If you try this code, it will look like the gradient just disappeared. That’s because the gradient is under the text.

Step 3: Reveal It

To show the gradient underneath our text, we need to make the text transparent. We can do that by setting color: transparent.

gif showing a transition between black and gradient text

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

You might be tempted to use the background shorthand here. Don’t.

Unfortunately, the background shorthand version of background-clip doesn’t support the text keyword.

Fallback

If you must support Internet Explorer, you'll have to fallback to a flat color.

Wrap everything we've written before in an @supports rule. This way it'll only be rendered in modern browsers.

Then, outside of the @supports block, set a fallback color for the text. It should probably be a color that appears in your gradient and works well with the rest of the design.

.gradient-text {
  color: red;
}

@supports (background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(60deg, #E21143, #FFB03A);
    background-clip: text;
    color: transparent;
  }
}
Enter fullscreen mode Exit fullscreen mode

Make sure the fallback comes before the actual gradient styles.

NOTE: Even though the @supports rule itself is also not supported in IE, everything inside will still be ignored, which is exactly what we want.


Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Some other articles you might enjoy

Discussion (2)

pic
Editor guide
Collapse
itscasey profile image
Casey 💎

Nice one! Great use of examples

Collapse
hadrysmateusz profile image