Create gradient text (or anything) in Divi

Divi allows you to add gradient colors to the background of any element so there is a gradual transition from one color to another.

Gradients can not be applied to the content within a module.

So, you can add gradient colors to the background of a Divi Text module, but you can only select a solid color for the actual text.

By using the built-in screen filter option on the text module, we can filter the background gradient to be visible on our solid black text color and create a text gradient effect.

• The gradient colors are applied to the element behind the module.
• The text in the Text module is given a solid black color (#000000)
• The background of the Text module is given a solid white color (#FFFFFF)
• The Text module Blend Mode is set to Screen
• Anything black (the text) will show the background gradient below
• Anything white (the module background) will not show the background gradient below

Create gradient text effect step-by-step

1. Create a new section, with a two-column row and add a Divi text module in the left column.
2. Add a background gradient to the left column in the column Content settings. For this example, we have used the blue colors #4facfe and #00f2fe. The Gradient Direction usually looks best at or around 90 degrees. For this example, we have set the Gradient Direction to 90 degrees.
3.  In the text module go to the Design tab > Filters and select the Screen option from the dropdown list.Filters allow you to choose how 2 layers of your website interact with each other. The Screen filter will allow the gradient from the layer below the text layer to be visible on any areas of black color and hidden for any areas of white color. Any shades of grey between would be partially visible.
4. Set the text module text color to black. By using a solid black text color on the text module, the screen filter will then allow the gradient to be filtered and be visible.
   
5. Set the tet module background to white. By using a solid white color on the text module background, the screen filter will NOT allow the gradient to be filtered and so will not be visible.
6. You now have a gradient text, but to emphasize it more we can make the text area bigger. In the text module set the heading text to h1, make it ultra-bold, upper case, and set the font size to 80px. By having a thicker font the effect is much more noticeable.

Add a gradient to anything black

The Screen filter option in the text module example above is allowing the background gradient to be visible through the black text.

The same will be true for any black element you place in the column.

In the examples above we have a blurb module, a number counter module, and a circle counter module that have all been set to use the Screen filter in their design options.

Just set the individual elements within the module to be a solid black color to allow the background gradient on the column to be visible.

Final thoughts on gradient text

This gradient text effect is a simple yet effective way to add some subtle details to your website. The effect works with any background, so for example you could also add a photo background and create photo text. The possibilities are endless, so have a play with the various settings and filter modes and see what you come up with.