No matter what kind of website you’re creating, highlighting copy and content remains one of the top priorities. With Divi’s 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!

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.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

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!

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)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-1 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

Continue by adding some custom padding to the section.

  • Top Padding: 215px
  • Bottom Padding: 215px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-2 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Row #1

Column Structure

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-3 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

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%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-4 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Sizing

Change the sizing settings as well.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-5 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

And modify the spacing settings.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-6 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Text Module to Column 2

Add Content

Now go ahead and add a Text Module to the second column of the row you’ve added.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-7 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Background Color

Give your module the correct background, depending on the type of layout you want to recreate.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-8 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Heading Text Settings

Change the heading text settings next.

  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Heading 2 Text Size: 67px (Desktop), 50px (Tablet), 40px (Phone)
  • Heading 2 Letter Spacing: -2px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-9 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

And add some bottom padding. Remember, we’re using bottom padding instead of margin to make sure the column gradient background doesn’t show.

  • Bottom Padding: 50px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-10 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Blend Mode

To make the column’s gradient background apply to the module you’ve added, apply a blend mode in the filters settings.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-11 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Divider Module to Row

Visibility

Second and last module we need in this row is a Divider Module.

  • Show Divider: Yes

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-12 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Background Color

Change the background color according to the type of layout you’re recreating.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-13 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

To reduce the width of the divider, we’re going to add some custom padding to the left and right side.

  • Left Padding: 250px
  • Right Padding: 250px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-14 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Blend Mode

Again, add a blend mode to make the column gradient background show.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-15 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Row #2

Column Structure

On to the next row! Use the following column structure:

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-16 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Column 1 Gradient Background

Continue by adding a gradient background to the first column.

  • Color 1: #c700ff
  • Color 2: #32f1ff
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 105deg
  • Column 1 Start Position: 20%
  • Column 1 End Position: 50%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-17 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Column 2 Gradient Background

We’re using a gradient background for the second column as well.

  • Color 1: #32f1ff
  • Color 2: #c700ff
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 90deg
  • Column 2 Start Position: 40%
  • Column 2 End Position: 60%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-18 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Column 3 Gradient Background

Same goes for the third column.

  • Color 1: #c700ff
  • Color 2: #32f1ff
  • Column 3 Gradient Type: Linear
  • Column 3 Gradient Direction: 85deg
  • Column 3 Start Position: 20%
  • Column 3 End Position: 50%

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-19 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Sizing

Change the sizing settings next.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-20 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

And add some custom left and right padding.

  • Left Padding: 100px (Desktop & Tablet), 50px (Phone)
  • Right Padding: 100px (Desktop & Tablet), 50px (Phone)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-21 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Blurb Module to Column 1

Add Content

Time to start adding modules! Add a Blurb Module to column 1 with a title of choice. Later on the post, we’ll use a separate module to add the body content.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-22 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Choose Icon

Select an icon of choice.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-23 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Background Color

And modify the Blurb Module’s background color.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-24 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Icon Settings

Continue by going to the icon settings and making some changes there.

  • Icon Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Image/Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 51px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-25 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Title Text Settings

Change the title text settings as well.

  • Title Font Weight: Bold
  • Title Text Alignment: Center
  • Title Text Color: #000000 (Light Layout), #ffffff (Dark Layout)
  • Title Letter Spacing: -1px
  • Title Line Height: 1.2em

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-26 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

Then, go to the spacing settings and add some custom margin and padding values.

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

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-27 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Blend Mode

Last but not least, apply the correct blend mode.

  • Blend Mode: Lighten (Light Layout), Darken (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-28 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Add Text Module to Column 1

Add Content

We’re separating the title and body of the Blurb Module into two modules to make the blend mode apply to the icon and title only. Go ahead and add a Text Module right below the Blurb Module containing the body content.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-29 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Background Color

Next, add a background color.

  • Background Color: #ffffff (Light Layout), #0c0c0c (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-30 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Text Settings

And change the text settings.

  • Text Letter Spacing: 0.5px
  • Text Line Height: 2.3em
  • Text Orientation: Justify
  • Text Color: Dark (Light Layout), Light (Dark Layout)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-31 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Spacing

To give the module some space to breathe, add some custom padding values in the spacing settings.

  • Top Padding: 100px
  • Bottom Padding: 100px
  • Left Padding: 70px
  • Right Padding: 70px

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-32 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Box Shadow

And top it off, add a subtle box shadow as well.

  • Box Shadow Blur Strength: 56px
  • Box Shadow Spread Strength: -12px
  • Shadow Color: rgba(0,0,0,0.3)

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-33 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Clone Blurb Module & Text Module Twice + Place in Remaining Columns

Last but not least, clone both modules you can find in column 1 and place the duplicates in the two remaining columns. Change the content accordingly as well.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only-34 How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Preview

Now that we’ve gone through all the steps, let’s take a final look at the end result.

how-to-apply-a-gradient-text-color-to-your-copy-using-divis-built-in-options-only How to Apply a Gradient Text Color to Your Copy Using Divi’s Built-in Options Only

Final Thoughts

In this post, we’ve shown you how to create gradient text on your website using Divi’s built-in options only. To make this tutorial work, and to be able to practice the approach on other designs as well, it’s necessary you go through the approach section of this post and understand it while recreating the design. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

SEO News and More

SEO News and More

Share This