How to Create an Abstract Gradient Hero Section with Divi (6 Gradient Color Palettes!)

Gradients can easily elevate your web design. Usually, they’re used in a subtle way. But you can also create sections on your website that are exclusively made out of gradients combinations. They make your design look modern and abstract at the same time. To help illustrate that, we’re going to recreate a section that’s made exclusively out of gradient colors. On top of that, we’ll share 6 different gradient color palettes that you can apply to the result.

Let’s get to it!

Result

Before we dive into the tutorial, let’s take a quick look at what the result, using the 6 different gradient color palettes.

Gradient Color Palette #1

• Color #1: #9b3e93
• Color #2: #ffdf6d
• Color #3: rgba(155,62,147,0.58)
• Color #4: #eb4fa8
• Color #5: #f6ff02
• Color #6: #ffaa00
• Color #7: rgba(255,255,255,0)

Gradient Color Palette #2

• Color #1: #4b24fb
• Color #2: #ffcad2
• Color #3: rgba(255,202,210,0.4)
• Color #4: #4b24fb
• Color #5: #ffcad2
• Color #6: #6de1ff
• Color #7: rgba(255,255,255,0)

Gradient Color Palette #3

• Color #1: rgba(195,55,100,0.82)
• Color #2: rgba(29,38,113,0.92)
• Color #3: rgba(195,55,100,0.47)
• Color #4: #C33764
• Color #5: #1D2671
• Color #6: #ff5e7e
• Color #7: rgba(255,255,255,0)

Gradient Color Palette #4

• Color #1: rgba(255,0,157,0.67)
• Color #2: rgba(0,255,216,0.8)
• Color #3: rgba(255,0,157,0.51)
• Color #4: #ff009d
• Color #5: #00ffd8
• Color #6: #770082
• Color #7: rgba(255,255,255,0)

Gradient Color Palette #5

• Color #1: rgba(0,19,165,0.76)
• Color #2: #e5e5e5
• Color #3: rgba(0,19,165,0.46)
• Color #4: #0013a5
• Color #5: #e5e5e5
• Color #6: #0fefff
• Color #7: rgba(255,255,255,0)

Gradient Color Palette #6

• Color #1: #873e4c
• Color #2: #ffe9e8
• Color #3: rgba(56,49,112,0.28)
• Color #4: #f27088
• Color #5: #383170
• Color #6: #383170
• Color #7: rgba(255,255,255,0)

How to Create an Abstract Gradient Hero Section with Divi (6 Gradient Color Palettes!)

Subscribe To Our Youtube Channel

Approach

• Keep the color palette of choice close by and keep each palette’s numbering the way it is
• Throughout the tutorial, we’ll refer to the color number of the color palette
• Decide on one certain color palette and reuse its colors for the entire example
• You can clone the section afterwards and apply other color palettes to see the result in real time
• To create the gradient shapes within the hero section, we’re using empty Text Modules
• Each one of these shapes is made using Divi and its built-in options

Recreate Hero Section Design

Add New Section

Gradient Background

Create a new page or open an existing one and create a new section with the following gradient background:

• First Gradient Color: Color #1 (find in color palette of choice)
• Second Gradient Color: Color #2 (find in color palette of choice)
• Gradient Type: Linear
• Gradient Direction: 160deg

Bottom Divider

Move on to the Design tab right away and apply the following bottom divider to this section as well:

• Divider Style: Find in List
• Divider Color: Color #3 (find in color palette of choice)
• Divider Height: 500px
• Divider Arrangement: Underneath Section Content

Spacing

Next, open the Spacing subcategory and create some space for the top and bottom of your section by adding ‘100px’ to the top and bottom padding.

Add a New Row

Column Structure

Once you’re done with the section settings, go ahead and add a two-column row to it.

Column 2 Gradient Background

Before adding any modules, open the row settings. First of all, we’ll need to apply a gradient to the second column of this row:

• First Gradient Color: Color #6 (find in color palette of choice)
• Second Gradient Color: Color #7 (find in color palette of choice)
• Column 2 Gradient Direction: 233deg
• Column 2 End Position: 42%

Sizing

Then, open the Sizing subcategory in the Design tab and apply the following settings to it:

• Make This Row Fullwidth: Yes
• Equalize Column Heights: Yes

Spacing

Move on to the Spacing subcategory and use the following padding next:

• Top Padding: 0px
• Bottom Padding: 30px
• Column 2 Top Padding: 50px
• Column 2 Right Padding: 50px

Border

The last thing you’ll need to change about the row settings is the border. Use ‘300px’ for the top right corner.

Add Empty Text Module to Column 1

Gradient Background

Once the row settings are done, we can start adding the various modules to both columns. We’ll start with column 1 by adding an empty Text Module to it. We’ll create a shape out of this Text Module. Open the Background subcategory and add the following gradient background to it:

• First Gradient Color: Color #4 (find in color palette of choice)
• Second Gradient Color: Color #5 (find in color palette of choice)
• Gradient Type: Radial
• Radial Direction: Top Left

Sizing

Move on to the Design tab, open the Sizing subcategory and make the following changes to it:

• Width: 33%
• Module Alignment: Left

Spacing

To create a shape out of this Text Module, we’ll need to apply some padding to it as well:

• Top Margin: 50px
• Top Padding: 200px

Border

We’re also going to add ‘500px’ to each one of the corners but the bottom right one in the Border subcategory.

Box Shadow

Lastly, add some depth to your shape by enabling the first option within the Box Shadow subcategory. We’re not making any modifications to its default settings.

Add Title Text Module to Column 1

Gradient Background

Right below the empty Text Module you’ve created in the previous part of this tutorial, add another Text Module containing the title of your hero section. Open the Background subcategory and apply the following gradient background to it:

• First Gradient Color: Color #6 (find in color palette of choice)
• Second Gradient Color: Color #7 (find in color palette of choice)
• Gradient Direction: 156deg
• Start Position: 6%
• End Position: 47%

Text Settings

You can use whichever text settings you want, but to create the exact same design, use the following settings for the Text subcategory:

• Text Font: Rufina
• Text Font Weight: Bold
• Text Font Style: Underline
• Text Underline Color: rgba(255,255,255,0.17)
• Text Underline Style: Solid
• Text Size: 100px
• Text Line Height: 1em
• Text Orientation: Left

Spacing

Apply some spacing to this Text Module as well:

• Top Margin: -100px
• Top Padding: 70px
• Bottom Padding: 20px
• Left Padding: 70px

Border

And lastly, we’ll add a top left rounded corner of ’50px’.

Add Empty Text Module to Column 2

Gradient Background

We’ve created all the modules we need for the first column so let’s move on to the second. Again, we’ll use an empty Text Module to create a shape. After adding the Text Module, apply the following gradient background to it:

• First Gradient Color: Color #4 (find in color palette of choice)
• Second Gradient Color: Color #5 (find in color palette of choice)
• Gradient Type: Radial
• Gradient Direction: Left

Spacing

To create the shape we want, add ‘600px’ to the Top Padding option of this Text Module.

Border

And apply ‘500px’ to each one of the corners but the bottom left one.

Box Shadow

To finish your shape, you can choose to add some Box Shadow using the first option without making any changes to its default settings.

Visibility

This shape takes up quite some space on tablet and phone. That’s why we’re going to disable it within the Visibility subcategory.

Result

Now that we’ve gone through all the steps, let’s take a final look at the result using all 6 different gradient color palettes.

Gradient Color Palette #1

Gradient Color Palette #2

Gradient Color Palette #3

Gradient Color Palette #4

Gradient Color Palette #5

Gradient Color Palette #6

Final Thoughts

In this post, we’ve shown you how to create a hero section entirely out of gradients. On top of that, we’ve provided you with 6 different gradient color palettes that you can apply to this example. If you have any questions or suggestions, make sure you leave a comment in the comment section below!