CSS text color gradient tutorial – Create gradient text with CSS

📂 Category: HTML/CSS

🖺 Last modified: 18th Mar 2020

💻 Experience: Beginner

🕑 Read Time: 3 min

Thinking about how to visually enhance your WordPress website? How about emphasizing some text elements with color gradients? Now you can change your boring one color text elements to colorful, visually attractive titles, CTAs and even paragraphs. Learn how to do it with our CSS text color gradient tutorial.

CSS text color gradient browser compatibility

To create a text color gradient with CSS we have to use the -webkit property extension. Therefore, color gradients applied on text should be compatible with webkit based browsers only. Luckily, nowadays the most popular non-webkit browsers also support and render gradient colored text. CSS text color gradients will be displayed correctly in the latest versions of the following browsers:

  • Chrome
  • Opera
  • Firefox
  • Safari
  • Edge

To make sure your text will look good even if some browser doesn’t support CSS gradients, it’s a good practice to also use the standard color: CSS property as fallback solution.

How does CSS text gradient color work?

There are no dedicated text gradient color properties in CSS. We have to use a combination of properties instead to achieve color gradient on text. The CSS text color gradient principle lays on the HTML element background color property, which we’re going to use as mask for the text. HTML element background color is easily set to gradient using the -webkit-linear-gradient CSS property. With a couple more properties we’ll mask the text inside the element into the background gradient color.

Since we’re masking the text inside a HTML element into the element’s background color, the elements background becomes transparent. That means that a HTML element containing gradient color text can’t have a background color set at the same time. In case you need to create elements containing gradient text on a specific background color (buttons for example), you’ll have to wrap the element with a parent element which will have the background color set. To learn more about gradient text with background color check our advanced examples.

How to create CSS text gradients in WordPress

In our example we’ll make main title <h1> of each website page gradient colored.

Please skip this paragraph if you’re already familiar with editing WordPress theme files. Firstly, you have to open the WordPress Theme Editor (inside the Appearance tab) and locate your theme’s stylesheet. If you’re not building a website from scratch but editing a WP theme, your stylesheet is most probably called style.css.

Pro Tip: Always make sure you are editing your Child theme. That way all the modifications you’ve done to the theme files won’t get lost when you update the main theme.

Paste the following code on the bottom of your stylesheet and save the changes.

h1 {
     background: -webkit-linear-gradient(pink, darkblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

 

If you have done everything correctly, your website main titles should change color into something like this:

An example of CSS text color gradient

A simple example of adding a colored gradient to the page title

 

As we mentioned before, the CSS text color gradient effect should be visible in practically all modern browsers. To be absolutely sure there won’t be unwanted glitches in any non-webkit browser, you can add a solid color fallback to your title’s CSS properties. Here’s an example of how the fail safe CSS code should look like:

h1 {
     color: blue; /* Fallback solid color */
    -webkit-text-fill-color: transparent; /* Webkit Disable Fallback */

/* Text color gradient properties */
    background: -webkit-linear-gradient(pink, darkblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

 

More possibilities with CSS text color gradients

Now that you got familiar with the basic principle of creating CSS text color gradients in WordPress, it’s time to go a step further. There are many different possibilities when creating text color gradients, beside the basic example shown in this tutorial. Let’s just name a few:

  • changing the direction of the text color gradients
  • creating multicolor text color gradients
  • creating circular text color gradients
  • etc.

To learn more on creating CSS text color gradients and see other cool examples of colorful gradients on text HTML elements, read our following tutorial:

Advanced examples of CSS text color gradients