[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create Gradient Text in Divi

Mark Hendriksen | May 22, 2024 | 2 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

In Divi, we do not have an option to create a gradient text color.

In this tutorial, I will be covering how you can create a gradient color for your titles and text/paragraphs.

I will also show you how you can change the gradient colors and direction of the gradient.

We can accomplish all of this with just a few lines of CSS code.

Preview of the Gradient Text

Here’s a preview of the gradient title and text we’ll create in this tutorial.

I will use a dark purple to light purple gradient for the text. However, you can use any color you prefer.

How to create gradient title colors

Place a text module on your page. In the text field box place your text and make it h1.

Divi text module with a h1 titl

Note: if you want to make a h2 or other title follow the directions under How to do this for other titles h2, h3, etc?

If you want to make a gradient paragraph then follow the steps under How to create gradient text/paragraph colors.

Then go to the Advanced tab, under CSS Class, and add the class gradient-text.

Add the gradient class

Now go to Divi > Theme Options > CSS and place the following CSS snippet here:

/* ### Gradient titles ### */

.gradient-text h1 {
background: linear-gradient(to right, #5a1aaf 0%, #5956e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-text .et_pb_text_inner {
display: flex;
}

You have now created a left-to-right gradient color for your h1 title.

Follow this tutorial further to learn how to change the color and direction of the gradient, and how to apply it to other titles and text.

How to change the gradient color

In the line “background: linear-gradient,” you’ll find two color codes. You can replace these with your own. The first color code is the starting color, and the second is the ending color.

Change the gradient color

How to change the gradient direction

To change the direction of the gradient, you can modify the linear-gradient function. Here are some examples of different directions you can use:

Left to Right (default):

background: linear-gradient(to right, #5a1aaf 0%, #5956e9 100%);

Right to Left:

background: linear-gradient(to left, #5a1aaf 0%, #5956e9 100%);

Top to Bottom:

background: linear-gradient(to bottom, #5a1aaf 0%, #5956e9 100%);

Bottom to Top:

background: linear-gradient(to top, #5a1aaf 0%, #5956e9 100%);

Diagonal (Top Left to Bottom Right):

background: linear-gradient(to bottom right, #5a1aaf 0%, #5956e9 100%);

Diagonal (Bottom Left to Top Right):

background: linear-gradient(to top right, #5a1aaf 0%, #5956e9 100%);

You can use any of these directions by replacing the to right part in the linear-gradient function with your desired direction. For example, to create a diagonal gradient from the top left to the bottom right, you would use:

.gradient-text h1 {
    background: linear-gradient(to bottom right, #5a1aaf 0%, #5956e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

How to do this for other titles h2, h3, etc?

If you want to use a h2 title you use the same CSS code but you have to change the h1 into h2.

Here is an example:

/* ### Gradient h2 titles ### */

.gradient-text h2 {
background: linear-gradient(to right, #5a1aaf 0%, #5956e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-text .et_pb_text_inner {
display: flex;
}

How to create gradient text/paragraph colors

If you want this for paragraphs instead of titles, just change the h1 to p.

Like this:

/* ### Gradient paragraphs ### */

.gradient-text p {
background: linear-gradient(to right, #5a1aaf 0%, #5956e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-text .et_pb_text_inner {
display: flex;
}

Conclusion

Although Divi does not come with a text gradient option this is a simple workaround to achieve this effect. You can play around with different color combinations and gradient directions to create unique and eye-catching titles and text.

If you have any questions, please ask in the comments below.

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

2 thoughts on “How to Create Gradient Text in Divi”

  1. Lovely very beautifully and easily guided for beginners like me I love to hear more articles in css coding like this appreciate your this effort for beginners like me

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet