DEV Community

loading...

How to create gradient text with CSS

Mario
Software Engineer from Vienna, Austria. Building things, mainly in JavaScript.
Originally published at mariokandut.com on ・6 min read

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 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);
}
Enter fullscreen mode Exit fullscreen mode

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%
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

💰: Start your cloud journey with $100 in free credits with DigitalOcean!

1. Add the gradient as a background

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)