3 Easy Ways To Create Awesome Gradient Text With Divi!

by | Jan 18, 2021

This post may contain links to products that I may, at no cost to you, earn a commission from. I only recommend products I use or support myself. For more info check here. Thanks!

Gradient Title Text and Divi

Divi is a powerful tool for a WordPress developer. It allows you to create websites and solutions for clients quickly and easily with its built-in editor.

Divi allows the user to visually make changes to the website that doesn’t require an extensive knowledge of how to code. One cool trend that is becoming more popular is the gradient.

One way to make your posts and site standout is using gradient text. Specifically in the Title, gradient text is a powerful way to not only show off some cool skills but also add some color and pop to your site, that really draws the user eyes to important areas.

Typically when using straight CSS you have to do a few things, such as background-clip, and text-fill-color as well as make sure you are using -webkit- since most of the implementations aren’t necessarily standard as of yet.

When using Divi you are still using CSS, but in a more visual way. Even though the backend is still writing code as you modify the website, you don’t have to worry about the code. You only worry about designing visually.

With Divi, it makes it pretty simple to make gradient text and today we are going to look at some ways you can create gradient text in Divi. 

I will first start off by showing you how to create a gradient with a light background, then a dark background, and then how to do it with any background.
I suggest creating a new page from scratch in Divi that you can use as a test page.

Light Background

  • On your page Create a Section.
  • Within Section Settings, under the Content Tab, change background to #ffffff or White.
  • Then click Design and go to Spacing and change the Margin to 0px for both top and bottom and Padding to 10em for both again. All this does is give us some area to work in order to let the text breathe. Obviously you can change this setting later.
  • Then Close the Section Settings and Create a Row.
  • Open the Row settings and click on Column Settings.
  • In Column Settings and go to Background and change the background to the gradient of your choice. For this purpose I chose #2b87da and #29c4a9. But again choice is up to you.
  • Save and close Column Settings and Row Settings.
  • In the Row create a Text module.
  • In the Body of the Text, write anything you want, such as Gradient Text Test. For this purpose I wrote Gradient Test and set the text to Heading 1.
  • Scroll down to Background and change the background to white or #ffffff.
  • Then go to Design and modify the Heading Text. Set the font to whatever you want. However, I would keep in that typically bolder fonts work a little better. But again as always follow your heart site font so that it looks best. For the purpose of this demo I set my Font to Raleway and then set the text size to 100px.
  • Make the Font Style UPPERCASE, and the Alignment Center.
  • Set Text Color  to #000000 or black.
  • I didn’t do any letter spacing but sometimes it looks nice.
  • Now, go down to Filters and scroll down to Blend Mode.
  • Select Lighten.

And Voila Gradient Text!


The steps for dark background are similar to those for the light background, however you are just changing some things. Here is the same instructions but for a dark Gradient.

Dark Background

  • First Create a Section.
  • Within Section Settings, under the Content Tab, change background to #000000 or Black.
  • Then click Design and go to Spacing and change the Margin to 0px for both top and bottom and Padding to 10em for both again. All this does is give us some area to work in order to let the text breathe. Obviously you can change this setting later.
  • Then Close the Section Settings and Create a Row.
  • Open the Row settings and click on Column Settings.
  • In Column Settings and go to Background and change the background to the gradient of your choice. For this purpose I chose #2b87da and #29c4a9.
  • Save and close Column Settings and Row Settings.
  • In the Row create a Text module.
  • In the Body of the Text, write anything you want, such as Gradient Text Test. For this purpose I wrote Gradient Test and set the text to Heading 1.
  • Scroll down to Background and change the background to black or #000000.
  • Then go to Design and modify the Heading Text. Set the font to whatever you want. However, I would keep in that typically bolder fonts work a little better. But again as always follow your heart site font so that it looks best. For the purpose of this demo I set my Font to Raleway and then set the text size to 100px.
  • Make the Font Style UPPERCASE, and the Alignment Center.
  • Set Text Color  to #ffffff or white.
  • I didn’t do any letter spacing but sometimes it looks nice.
  • Now, go down to Filters and scroll down to Blend Mode.
  • Select Darken.

And Voila Gradient Text!


So now let’s say you want a Gradient Text to show up but you have a multi-colored background or something that is not just black or white.

Gradient Text with ‘Custom’ Background

  • First, create your Section, then a Row and add a Text Module.
  • In the Section, add a background with a picture, and then a gradient of your choice. For this example I set a background picture, then a gradient overlay.
  • Put the gradient above the picture as an overlay, and set the opacity slider to around 0.45ish or whatever you like.
  • Then set your font, text size and alignment for the Text. You do NOT need to set the color of the font or anything.
  • The last thing you will do in regards to the text module is go to the Advanced tab in the Text module. Click CSS ID & Classes.
  • Under CSS Class write down ‘textgradient‘. (Without the quotation marks)
  • Save everything and then go back to main Dashboard by either opening new tab/window or just going back.
  • On the main Dashboard click Divi > Theme Options.
  • Under Theme Options scroll all the way down to Custom CSS.
  • In the Custom CSS copy this code:
.textgradient h1 {
background: -webkit-linear-gradient(153deg, #2b87da, #b07ae4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Obviously replace the color code with whatever gradient you want and the degree that you desire.

I find that 153deg works pretty nicely and looks good. I am not sure where I came up with that number or figured that out, I just like the way it looks.

Now after inputting that code in the box, click Save Changes, and then go back to your test page or refresh the test page and voila!

Gradient Text with a ‘custom’ background!
Pretty neat huh? Also, did you notice that at the beginning of the post I talked about you don’t necessarily need to worry about writing code for this particular application? Then after showing you how to create Gradient Text without code I showed you how to WITH code? That’s almost like how writers bring things full circle in their books….kind of.
So anyways.
Those are some ways to create Gradient Text in Divi.

But wait there’s more!
That’s right I have a bonus way!

Instead of doing all this, you can ALSO purchase a great resource for Divi.

Using Divi Supreme for Gradient Text


Divi Supreme is a cool resource that includes quite a few Divi modules and plugins. One of them is wait for it: Gradient Text! It allows you to just type in text and it automatically makes it into a gradient for you! Not only that it gives you the ability to add Typing Text, and flipcards, as well as many more great plugins and modules that really enhance what you can do with Divi. Check out Divi Supreme here!


Well, so that’s it for this post. If you enjoyed this post stay tuned for new posts and don’t forget to check out Divi and start creating awesome websites today!

If you have any questions, please feel free to drop me a line and don’t forget to subscribe so you are notified when a new post comes up!
Thanks for reading!

Divi WordPress Theme

Need a website solution that turns your visitors to customers?