How to Create Gradient Text in Divi

Updated: September 1, 2022

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 without writing any single code.

Steps to Create Gradient Text in Divi

Steps 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 the 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

Before adding a filter blending to the column, we must set the column background. 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 to 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 if you want to save or publish your project.

The Bottom Line

This article shows you how to create gradient text in Divi. 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 really need it.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.