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.
Steps to Create a Gradient Text in Divi via Custom CSS
Two steps are involved if you want to create a gradient text in Divi using custom CSS. First, you need to create the CSS gradient itself. Once done, you can implement the gradient to your preferred text. Here are the details.
Step 1: Create the CSS Gradient
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;
}Step 2: Implement the CSS Gradient to a Text
Once done creating the CSS gradient, the next step is to implement it to a text on Divi Builder. Start by adding 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.
Summary
Although Divi has an advanced gradient builder, it doesn’t allow us to easily apply a gradient to text. The gradient builder of Divi is only applicable to background and button. Thankfully, Divi comes with custom CSS feature to allow us achieve more styling options.
Actually, there are two ways to create a gradient text in Divi. First, you can use Divi AI to generate the CSS snippet. Second, you can apply the steps we have just covered above. The latter method is a better suited option if you want to have a full control over the gradient. More importantly, the method is free.
