Examples of text gradient CSS code – Color gradient on text

A good practice of enhancing the website visual appearance is the implementation of color gradients to various text elements. Titles, links, buttons and CTAs will stand out even more if we replace the boring solid color with a colorful gradient. In this article we’ll show you some cool examples of text gradient CSS code that you can apply on your website.

Note: If you’re not familiar with the basic principles of creating CSS text color gradients, we got you covered. Before you continue exploring the following advanced examples of text gradient CSS code, please read our CSS text color gradient Introductory Tutorial.

Changing the direction of text gradient color

The default direction of text gradient color is from top to the bottom. The default direction will be applied if text gradient CSS code doesn’t specify otherwise. To specify the direction of the color gradient, firstly we have to use the background-image: CSS property instead of the default background:. Secondly, before defining the initial and final color values for the background-image: property, we have to set the direction starting point value.

Here are a couple of examples of custom direction text gradient CSS code:

<h1>Gradient direction from left to right</h1>

<h2>Gradient direction from top right to bottom left</h2>

<h3>Gradient direction angle defined by circle degrees</h3>

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

h2 {
     background-image: -webkit-linear-gradient( top right, pink , darkblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h3 {
    background-image: -webkit-linear-gradient( 70deg, pink , darkblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Custom directions of color gradients applied on text elements

Multi color CSS text gradients

Except bi-color gradients transforming from the initial to the final color, we can also create multi color text gradients. By adding multiple color values (color stops) to the background-image: property, we can achieve visually attractive text gradient transitions. There’s also the possibility to combine multiple color values with the direction value, showed in the previous example.

Try experimenting with the following examples of text gradient CSS code:

<h1>Three color left to right color gradient title</h1>

<p>
A gradiented paragraph with multiple color stops and top to bottom direction. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis.
</p>

h1 {
    background-image: -webkit-linear-gradient(left, orange, purple, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 38px;
}

p {
    background-image: -webkit-linear-gradient(orange, red, darkred, navy, green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Examples of multicolor gradients applied on text elements

Radial color text gradient CSS code

In the previous examples of gradients applied on text elements, color transitions were linear. We can also create radial text color gradients by changing the background-image: argument from -webkit-linear-gradient to webkit-radial-gradient. Similar to the linear text gradients, we have plenty of possibilities to customize the appearance of the radial gradient text color. We can go from simple bi-color centered radial gradients, to complex multi color text gradients with custom center positions.

Here are some examples of radial text color gradient CSS code, which you can modify according to your needs:

<h1>A simple two color centered radial gradient title</h1>

<p>
A radial gradient paragraph with multiple color stops and top to bottom direction. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis.
</p>

h1 {
    background-image: -webkit-radial-gradient(circle, turquoise, navy);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

p {
    background-image: -webkit-radial-gradient( 25% 30%, circle, yellow 3%, orange 15%, red 41%, darkred 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Radial gradients applied on text elements

The first example (title) is pretty self explanatory, but here’s what we did in the second example (paragraph) to get the sun haze effect:

• 25% 30% – gradient source position
• circle – gradient shape (default is ellipse)
• yellow 3% – color step and gradient size relative to the source position
• etc.

Adding background color to gradient colored text

Text gradient CSS code works the way that text is masked with the element’s background color or image. As the text gets masked in the background color gradient, the background itself becomes transparent. If we want to have the text background in a specific color, we have to wrap the text element into another HTML element. Now we can specify the background color of the parent element which will then become the background color of our gradient color text element.

Let’s see how it works on the example of a colorful link button:

<a href="#" class="button-background">
<span class="button-text">Click Here!</span>
</a>

.button-background { 
    display: inline-block;
    padding: 30px 60px;
    border-radius: 10px;    
    background-image: -webkit-radial-gradient(circle, blue, navy);
}


. button-text {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    background-image: -webkit-linear-gradient(left, pink , darkseagreen);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Example of a CTA button created using the HTML & CSS code from the example above.

Ready to learn more?

In the previous examples we showed you only few possibilities of creating text color gradients for your website. There’s a wide variety of other ways to create colorful CSS gradients. To learn more about color gradient CSS properties, the w3schools CSS Gradients reference is a great place to expand your knowledge.