How to Create Gradient Text in Divi

Wise people say that embracing our life and enjoying every moment will make our life meaningful because life doesn’t happen in extremes from 0 to 100%. It happens in between the gradient area. Alright, talking about gradient, the color gradient gradually blends from one color to another. The blending can occur between colors of the same tone, two different tones, or even between more than two colors.

Maybe you are wondering, “Is it possible to create a gradient text on your site?” Well, everything is possible in Divi. With Divi, you can create gradient text easily. Let’s get started!

How to Create Gradient Text in Divi

There are two methods of creating gradient text in Divi Builder:

• Without Adding CSS Code
• Using CSS Code

Method One: Without Adding CSS Code

Step 1: Add a Text Module

Go to your Divi editor. You can create new content (post/page) or select existing content. Insert a row with a single column. On the modules panel, pick the Text module. After that, you can edit and style the text as you prefer.

Note: Please use black color (#000000) in your text.

Step 2: Apply a Gradient Background to the Row

Open the Row Settings by clicking the gear icon (⚙️) on the row. On the Content tab, go to Background -> Background Gradient. Add background gradient by clicking the plus icon (➕).

Go to the Gradient Stops if you want to edit the gradient colors. Slide the toggle to set the color value, and you can also add the color by clicking on the line (see the GIF).

Step 3: Adding a Filter Blending to the Column

We must set the column background before adding a filter blending to the column. Go to the column settings by clicking the gear icon (⚙️). Set the color of the column background to white (#ffffff).

Once you set the column background to white color, click the Design tab -> Filters. On the Filters settings, go to the Blend Mode and set it to the Screen.

Step 4: Add a Padding to the Row

As you can see from the image above, the text is already gradient. Now, we’ll remove the colors above and below the text. Go to the Row Settings -> Design tab -> Spacing -> Padding. Set top and bottom paddings to 0px.

The tutorial is finished if you only have a single column on your row. But, if you have multiple columns, you need to enable two options as below:

• Use Custom Width: It will define the custom gutter width of the row.
• Equalize Column Heights: It will force all columns to assume the height of the tallest column in the row. All columns will have the same height, keeping their appearance uniform.

That’s it. Don’t forget to click the Save Draft or Publish button to save or publish your project.

Method Two: Using CSS Code

Now we move to the second method of creating gradient text in Divi Builder; adding the CSS snippet. This method is more straightforward than the previous method. In this example, we will focus on gradient heading text.

Step 1: Add the Heading Text

Write your desired text on your Text module and set it to Heading. In this example, we set it to Heading 1.

Next, add a unique CSS class name to the module. On the module settings -> Advanced tab -> CSS ID & Classes. Afterward, add a unique CSS class name to the CSS Class input field. For example, you can add the class name “gradient“.

Step 2: Add the CSS Snippet

Once you add the heading text and unique CSS class name to the Text module, we will add the CSS snippet to the Page Settings.

Go to the Page Settings by clicking the gear button (⚙️) on your Divi Builder editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.

.gradient h1{
    background: linear-gradient(163.97deg, #7d54c9 41%, #4ce5ee 58.4%);
        -webkit-background-clip: text;
        display: inline-block;
        -webkit-text-fill-color:transparent;
    }

.gradient h1 : This line selects all h1 (heading 1) elements that have the CSS class name “gradient“. It means this rule will only apply to the h1 elements with the class “gradient“. If you use another heading level, replace the h1 with your headings level (h2, h3, h3, etc.).

If you are happy with the gradient color applied to your heading text (as in the image above), keep it like this and save your project if you want to. But, if you’re going to change with a different gradient color, you can edit the CSS snippet more specifically on the CSS gradient code (see the image below).

You can create a gradient using CSS gradient online tools to get the CSS gradient code. Click here to see some CSS gradient tools that we recommend. Once you finish creating the gradient, copy the CSS and replace the existing CSS gradient code with a new one by pasting the CSS (see the image below).

That’s it. Now you’ve successfully created a gradient heading text in Divi Builder. Save or publish your project if you want to.

The Bottom Line

This article shows how easily you can create gradient text in Divi using two methods, with and without CSS code. Creating gradient text is one of the ways to help your website be more attractive. However, we want to remind you that not every text is suitable as gradients. So, use gradient text only if you need it.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.