How to Create a CSS Text Gradient


Gradient text is becoming increasingly popular all over the web. We even use it on Fjolt in various places. In the past, gradient text required static images, but now it can easily be done with CSS rather than photoshop.

Here is an example of gradient text

How does it work?

It might surprise you to know that CSS gradient text is actually done through an unstandardized set of webkit CSS properties. These properties have become so pervasive on the web, that even Firefox supports them now.

Since most other browsers are largely chromium based, gradient text has surpisingly broad support in all modern web browsers for a set of non-standardized properties. Worried about older browsers? Since these are webkit properties, older browsers just ignore them.

That means those who can see gradient text, do, and those that cannot, just see the normal text color. Easy!

Adding Gradient Text

To add gradient text, we need to add the following CSS:

css Copy
.text { background-image: linear-gradient(60deg, #8500ff, #ff8100); color: black; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-box-decoration-break: clone; }

Let's break this down:

  • background-image is the gradient we want to use for our text
  • -webkit-text-fill-color replaces the normal color of the font with a transparent color, so the text disappears!
  • -webkit-background-clip clips the background image to the outline of the text. Now the background will only show where the text is.
  • -webkit-box-decoration-break is the strangest property I've ever seen in CSS, but it ensures the gradient works on multiple lines.

Now it's up to you what gradient you want! Just adjust the background-image colors to show the gradient style you desire.

Happy text gradient-ing!

Last Updated Tuesday, 30 March 2021

Subscribe to Newsletter

Subscribe to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email