Divi has a built-in module called Text. It’s a versatile enough module. Not only you can use it to add a static text, but you can also use it to add dynamic text pulled from a custom field plugin like Advanced Custom Fields and Pods. You can style up the text using the built-in styling options offered by Divi.
One thing you can’t achieve with the Divi built-in styling options for the Text module is to create a gradient text. The only way to create a gradient text on the Text module is by using custom CSS. This post will show you how.
Creating a Gradient Text in Divi via Custom CSS
The very first thing you need to do to create a gradient text via custom CSS in Divi is by creating the gradient CSS itself. To ease your job, you can use an online CSS gradient generator such as Codioful, CSS Gradient, and Coolors.
Once you are done creating the gradient, copy the CSS snippet. Example:
background: linear-gradient(243.99deg, #596788 3%, #e038da 46.28378378378378%, #000066 100%);Next, add the following lines beneath the gradient code.
-webkit-background-clip: text;
display: inline-block;
-webkit-text-fill-color:transparent;Place all lines above into a declaration and add a class (e.g., gradient) to the declaration. Also, add an element selector depending on the text element you want to target. For instance, if you want to target heading 1, you can add the h1 selector. To target heading 2, you can add the h2 selector. And so on.
Here is an example of the final CSS snippet targeting heading 1:
.gradientt h1{
background: linear-gradient(243.99deg, #596788 3%, #e038da 46.28378378378378%, #000066 100%);
-webkit-background-clip: text;
display: inline-block;
-webkit-text-fill-color:transparent;
}Next, add a Text module and set the text element according to element selector on your CSS snippet.
Add a Code module and place your snippet to the code editor. Since you want to add CSS snippet, make sure to place your snippet between the <style></style> tags.
That’s it. You can publish/update your page once you are done editing it.