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.
Table of Contents
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.
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.
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.
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.
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
Hi Laila,
Great to hear.
More tutorials with Divi and CSS are coming.