How to create gradient text with CSS

Text gradients are an easy way to create engaging designs and eye-catching features, but what is a gradient?

A gradient is a progression of colors with a start and end point. Hence, a linear gradient starts with one color and gradually transitions in a straight line to another color . A gradient has no natural or preferred size (intrinsic dimensions). The size of a gradient will always match the size of the element is applies to.

Linear Gradient

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. The result is an object of the <gradient> data type, which is a special kind of <image>, see MDN.

Examples

The syntax of a 45deg tilted linear gradient with start color red and end color blue.

.gradient {
  background: linear-gradient(45deg, red, blue);
}

You can also have multiple color stops to create a striped effect.

.gradient {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

How to add linear gradient to text

Since we now know what we can do with the linear gradient CSS function, we can easily apply it to any text with three steps.

1. Add the gradient as a background

.gradient-text {
  background-image: linear-gradient(45deg, var(--red), var(--yellow));
}

2. Clip the background to the text

The CSS property background-clip sets whether an element's background extends underneath its border box, padding box, or content box. MDN.

.gradient-text {
  background-color: var(--red);
  background-image: linear-gradient(45deg, var(--red), var(--yellow));
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. Add fallbacks

Imagine everything would just be equally supported in every browser? Well, since there is not full support, we have to add fallbacks.

.gradient-text {
  background-color: var(--red);
  background-image: linear-gradient(45deg, var(--red), var(--yellow));
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

Voila, that's it.

Text Gradient

TL;DR

With the CSS function linear-gradient() it's easy to apply a linear gradient to a div, and with a background-clip you can adjust it for texts.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

If you want to know more about CSS, have a look at these CSS Tutorials.

References (and Big thanks):

CSS Gradient, MDN, Fossheim