How to Use The Divi Gradient Builder to Design Circular Background Shapes

Rifat Divi Tutorials May 18, 2022

With Divi's Gradient Builder, you can make a wide range of backgrounds. The colors combine to make shapes and patterns that would be hard to make on their own. The Gradient Builder in Divi has settings that make it easy to make circular patterns, like a round background shape. This makes it easy to create unique backgrounds. In this post, we'll look at how to use the Divi Gradient Builder to make unique circular background shapes that draw attention to any section or column.

Design Preview

Here is an outlook of what we will be building today. Here is 1st circular background shape design.

Here is 2nd circular background shape design.

Design Module

Instead of a Divi layout section, we will create a custom section for this tutorial. The section will require a two-column row of equal size for its content.

Create Amazing Websites

With the best free page builder Elementor

Start Now

A divider will be placed in the left column. This is not going to be apparent. It allows our column 1 background to be displayed on smaller screen sizes. On smaller screens, only columns with modules are displayed. Two text modules and a contact form will be included in the right column.

Add the following modules accordingly to the row.

Section Settings

Click the gear icon to reveal the section's settings. Then change the background color.

  • Background Color: #fff7ef

From the Design tab, scroll down to the Spacing section and make do following changes to padding.

  • Top: 0px
  • Bottom: 0px

Row Settings

Open the row settings and alter the following values accordingly.

  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: None

Now from the spacing section, change the padding value.

  • Padding: 0px Top, 0px Bottom

Column Settings

Column spacing modifications are the next step. During the process of creating the circular backdrops, we'll return to the column settings. Open the settings for the first column and make the changes on the design tab.

  • Top: 8vw
  • Bottom: 8vw
  • Left: 10%
  • Right: 10%

Now open the second column and make the following changes.

  • Top: 8vw
  • Bottom: 8vw
  • Right: 12%

Divider Module

Open the divider modules setting from the 1st column and change visibility.

  • Show Visibility: No

After that, go to the design tab and look for the Spacing section. Select the tablet tab and add 15 volts to the padding on the top and bottom. The tablet's settings will be synced to the phone. 

  • Padding (tablet): 15vH Top, 15vh Bottom

Text Module 1

Now go to the first text module on the 2nd column. It will act as a title for the contact form. Change the following:

  • Body Content: Get In Touch

Go to the design tab and change the font and font-weight.

  • Font: Inter
  • Font Weight: Light

Also, change the following settings too.

  • Color: #000000
  • Font Size: 78px (desktop), 44px (tablet), 28px (Phone)
  • Line Height: 1.1em

Text Module 2

Open the second text module settings and add a description.

Go to the design tab and add the following values to the designated places.

  • Font: Inter
  • Font Weight: Light
  • Color: #000000

Also, alter the following values too.

  • Font Size: 24px (desktop), 20px (tablet), 16px (Phone)
  • Line Height: 1.6em

Contact Form Module

Open the settings for the contact form module and activate Use a Spam Protection Service under Spam Protection. Give spam protection service in Divi Email Opt-in a read to know further.

  • Use a Spam Protection Service: Yes

Fields Design

Go to the design tab of the contact form and change the mentioned settings.

  • Fields Background Color: rgba(0,0,0,0)
  • Text Color: #000000

Next, make some changes to the font section.

  • Font: Inter
  • Size: 16px
  • Line Height: 1.6em

Button Design

Scroll down to the button option and change the following.

  • Use Custom Styles: Yes
  • Text Size: 16px
  • Text Color: #ffffff
  • Background Color: #b35330

Change border radious, font and its weight too.

  • Border Radius: 100px
  • Button Font: Inter
  • Weight: Medium

Now change the button padding settings.

  • Button Padding: 16px (Top, Bottom), 40px (Left, Right)

Field Border

Now come down to the Border setting and make these changes.

  • Inputs Border Width: 1px
  • Inputs Border Color: #b35330

Field Settings

Change the size of the field and make them full width.

Section Cloning

Now duplicate the existing section 1 time so that we can have 2 sections in total. We are going to add different background colors to them.

Applying Background Gradient

We'll add the Background Gradient to the left column of the row for each of our circular backdrops. Some of them will feature Gradient Stops that can be stacked, and others will use the same colors. The gradient will be altered if the stack order is incorrect, therefore pay close attention to it. There will be a variety of units used, but they'll all begin with a percentage as a base.

Open the row settings and click on the first column settings. Then scroll down to the background and move to the gradient background.

You can add a Gradient Stop to the bar by clicking on it. By picking them, you can change their color. As we go forward, we'll be changing the percentages on the gradient bar.

Circular Background Shape One

Five Gradient Stops will be used to create a circular background with a lot of circles within circles.

Gradient Stop 1

Follow the settings for 1st gradient stop.

  • Position: 29
  • Color: #ffb482

Gradient Stop 2

Follow the settings for 2nd gradient stop.

  • Position: 31
  • Color: #a84321

Gradient Stop 3

Follow the settings for 3rd gradient stop.

  • Position: 51
  • Color: #ffc99b

Gradient Stop 4

Follow the settings for 4th gradient stop.

  • Position: 63
  • Color: #ffc99b

Gradient Stop 5

Follow the settings for 5th gradient stop.

  • Position: 78
  • Color: #ffb67f

Setting For Gradient

Gradient settings should be changed to Circular and center-placed. Enable Place Gradient Above Background Image, Repeat Gradient, and Change Units to Pixels.

  • Type: Circular
  • Position: Center
  • Repeat Gradient: Yes
  • Gradient Unit: Pixels
  • Place Gradient Above Background Image: Yes

Here is our output for Circular Background Shape 1.

Circular Background Shape Two

There will be a total of five Gradient Stops in our second circular background shape. A portion of a circular pattern will be seen from one corner.

Gradient Stop 1

Follow the settings for 1st gradient stop.

  • Position: 31
  • Color: #a84321

Gradient Stop 2

Follow the settings for 2nd gradient stop.

  • Position: 51
  • Color: #ffb482

Gradient Stop 3

Follow the settings for 3rd gradient stop.

  • Position: 52
  • Color: #ffc99b

Gradient Stop 4

Follow the settings for 4th gradient stop.

  • Position: 63
  • Color: #ffc99b

Gradient Stop 5

Follow the settings for 5th gradient stop.

  • Position: 78
  • Color: #ffb67f

Settings For Gradient

The next step is to alter the gradients. Switch to Circular and put it at the Top Right location. Use Repeat Gradient, Pixels as the unit, and Place Gradient Above Background Image to create a seamless background image. Close the module and save your configuration.

  • Type: Circular
  • Position: Top Right
  • Repeat Gradient: Yes
  • Gradient Unit: Percent
  • Place Gradient Above Background Image: Yes

Here is our output for Circular Background Shape 2.

Wrapping Up

This concludes our tutorial on creating custom circular background shapes with the Divi Gradient Builder. Now you can easily create eye-catching backdrops using the Gradient Builder. Using circular shapes is a great way to add visual interest to a section or column. Anyone may quickly and easily construct eye-catching circular patterns by following the instructions provided here. You should experiment with the parameters and stacking order to see what you can come up with. Check other Divi tutorials, who knows that something might become helpful for the next project.