How to Apply a Gradient Text Color to Your Copy Using Divi's Built-in Options Only

No matter what kind of website you’re creating, highlighting copy and content remains one of the top priorities. With Divi and its built-in options, there are a ton of ways to get there. One of the possibilities you have is applying a gradient text color to your copy. This is a great approach for adding color to your website, especially if you’re keeping the rest of your website clean and minimalistic. It helps to balance whitespace and it gives your website a breath of fresh air.

In this tutorial, we’re going to show you how to give your text a gradient color using Divi’s built-in options only.

Let’s get to it!

Table Of Contents

1 Preview
2 Approach
3 Let’s Start Creating!
4 Preview
5 Final Thoughts

Preview

Before we dive into the tutorial, let’s take a look at the outcome on different screen sizes. We’ll show you how to make this work using both a light and dark color palette. Once you get the approach, you can create all kinds of designs with gradient text.

Approach

1. Understanding Divi Blend Modes

Blend modes work exactly the way you’re used to them in image editing software. They’re based upon layer structures. Concretely, that means a blend mode in Divi will follow a certain hierarchy:

A blend mode applied to a module will blend the module + column below it
A blend mode applied to a column will blend the column + row below it
A blend mode applied to a row will blend the row + section below it

For this tutorial, it’s necessary to understand that a blend mode applied to a module will blend with the column below it. By giving the column a gradient background and the module in question a blend mode, we can manage to achieve gradient-colored text.

2. Choosing Between an Entirely Dark or Light Color Palette

To make this work, you’ll either have to use an entirely dark or light color palette. The blend modes we’re using, lighten and darken, will only deliver the desired outcome when you’re either using an entirely black or white color. When using other colors, the effect we’ve applied will kind of show through.

3. Removing All Gutter Width Between Columns & Modules

As mentioned in the first part of the approach, we’re going to use column gradient backgrounds. To make sure this gradient background doesn’t show up anywhere we don’t want to, we’re going to remove all the gutter width. By doing so, we’ll make sure that there’s no default custom margin being applied between modules. To make up for space we lose, we’ll manually add custom padding instead.

4. Using Padding Instead of Changing an Element’s Width

And to adjust the width of a design element, we’ll use custom left and right padding. Changing the width in the sizing settings would change the width of the entire module and would allow the column gradient background to show up on the left and right side, which is something we don’t want.

Let’s Start Creating!

Subscribe To Our Youtube Channel

Add New Section

Background Color

Let’s get started! Add a regular section to a new or existing page and give it the right background color (depending on if you want to recreate the light or dark layout).

Background Color: #ffffff (Light Layout), #000000 (Dark Layout)

Spacing

Continue by adding some custom padding to the section.

Top Padding: 215px
Bottom Padding: 215px

Add Row #1

Column Structure

Then, add a new row using the following column structure:

Column 2 Gradient Background

Add a gradient background to the second column of the row. This is where we’ll place the title Text Module in the next part of the tutorial.

Color 1: #c700ff
Color 2: #32f1ff
Column 2 Gradient Direction: 150deg
Column 2 Start Position: 20%
Column 2 End Position: 60%

Sizing

Change the sizing settings as well.

Make This Row Fullwidth: Yes
Use Custom Gutter Width: Yes
Gutter Width: 1

Spacing

And modify the spacing settings.

Top Margin: 50px
Bottom Margin: 50px
Left Padding: 50px
Right Padding: 50px