Gradients are a great way to add interest and depth to your web pages. They can be created with two or more colors and various levels of transparency and combined with pattern effects to create stunning visuals for your website.

Divi's Gradient Builder is part of Divi's suite of background design options. Adding a gradient to any section, row, column, or module is easy.

We'll use one of Divi's layout packs to demonstrate adding gradients to a section.

Once clicked, the default gradient will be applied.

You'll need to use the color stops to set the colors for a gradient.

With the Divi Gradient Builder, you can add more than two color stops to any gradient. To add another color stop, click into the gradient slider to add a color.

Once added, click and hold to slide the color stop anywhere within the gradient slider.

When two or more color stops are used, colors can be adjusted to create more complex gradients.

Additionally, you can right-click on each color stop to do things like find & replace a color or remove it.

You can overlap any color stops in the Divi gradient builder to create cool effects.

Example: If you'd like a sharp line between your color stops, you can click into or right-click on any color stop to slide it over another one.

Doing so adds a sharp division of color into the gradient. This can be useful to create a striped background effect for your gradients.

In this example, three color stops are used. The leftmost color stop is placed directly over the middle one.

This gives the gradient a solid color for the first 33% of the gradient, then uses the second and third color stops to create a smoothly blended gradient effect.

Sometimes, you can place your gradient over a background image. This allows the background image to be displayed underneath the gradient. Toggle the Place Gradient Above Background Image to yes.

As seen in the screenshot above, even though the toggle is set to yes, the background image we have applied isn't showing.

This is because you'll need to adjust the transparency of your color stops. You can adjust the transparency of one or all of your color stops to change the effect.

To adjust the transparency:

There are four gradient types available within the Divi Gradient Builder:

The linear gradient type is selected by default when first adding a background gradient.

For the linear option, you can choose the direction for your gradient. 180 degrees is the default position, but this can be adjusted however you wish.

Example: Switching the direction to 90 degrees will display the gradient horizontally.

You may click and drag the gradient direction slider to adjust the direction or type a specific value into the field.

The circular gradient applies a round gradient effect to your background.

You can define the position for your circular gradient using the dropdown menu associated with it.

In the screenshot below, we have a top left position applied. However, you can choose from several options:

Each setting has a unique look, so we encourage you to take time with each position to determine which works best with your design.

The elliptical gradient is similar to the circular one, providing the same position options. However, instead of applying a circle, it uses more of an egg-shaped gradient to the background.

The conical gradient is the final choice for gradient type in the Divi Gradient Builder. Similar to the linear gradient type, the conical selection gives users the ability to define the gradient direction as well as the gradient position.

The currently applied gradient will be duplicated when the repeating gradient is toggled to yes.

Looks will vary depending on the gradient type you choose. Repeating the gradient applies an interesting design element to your background. The more color stops you choose, the more drastic the change.

Some cool design effects can be achieved by combining gradient type, the gradient repeat option, and gradient units.

When certain gradient types are selected, an additional option for gradient units is displayed. Linear, circular, and elliptical gradient types allow Divi users to create stunning background gradients to add dimension to their designs.

Gradient units specify what the gradient stop numbers on the slide bar indicate. Additionally, they determine how the stops are measured.

They affect the pattern created by the repeat options. When implementing gradient units, consider how your design will change based on the unit selected.

In our example, we use the percent gradient unit. Our color stops are set to 0, 2, and 10. The opacity on all three stops is set to 70% or .7.

We've chosen the circular gradient type, set the position to the top left, and toggled the repeat gradient to yes.

By applying the settings from the percent unit example, our design changes as we select different units.

Using gradients is an excellent way to add color, depth and eye-catching effects. They can improve design and capture your site visitor's attention when used properly.

We will outline a few best practices to get the most from Divi's Gradient Builder.

Choosing the right colors for your gradients is an essential step. After all, you probably need to create a website for clowns. Choose hues of one color to create subtle gradients pleasing to the eye. Consider using Divi's Color Management System to achieve visual balance in your designs.

A good example of using color families in your gradients can be found in Divi's Private Investigator layout pack. As you can see, this design utilizes colors within the same family to create an eye-catching design with similar colors.

Analogous colors live next to one another on the color wheel. Using them is pleasing to the eye and a basic principle of color theory.

Brands such as BP, Red Bull, and MasterCard use analogous colors in their branding. As previously mentioned, using Divi's dynamic magic color system is a great way to choose colors for your gradients.

Additionally, Adobe Color is a great source. It can generate color palettes based on analogous, monochromatic, complementary, and other color harmonies. In addition, there are pre-made color themes available. As a bonus, Adobe Color is free to use.

Analogous colors don't have to apply to just colors used in elements. You can expand on their use by choosing images for your design that also incorporate those principles.

For example, take a look at Divi's Leather Goods layout pack. The images used in the layouts are a perfect example of picking images that fall within the analogous color wheel.

To avoid being monotonous, use different gradient types on your web pages.

For example, avoid using the same gradient background on every page. Subtle changes create a more dynamic design that engages your site's visitors.

If you're using a linear gradient in your hero section, swap things up by choosing a circular or conical background gradient in another section on the same page.

The same is true for using gradient backgrounds in elements such as buttons. Use gradient backgrounds for your call to action (CTA) and section backgrounds. A great example of this is seen in Divi's Digital Marketing layout pack.

While color is essential in good design, it's easy to overdo it. Limit colors to 3-4, and use hues to create balance. Too many colors can confuse or overwhelm visitors. On the other hand, try to incorporate more than two colors in your gradients.

Limiting colors in a gradient can cause your gradient to appear muddy and unpleasant. Try using a third color of the same family. This will add depth and an interesting element to your gradient.

Take a look at Divi's Online Yoga layout pack as an example. While visually stunning, the layout limits color usage to 4 colors.

The gradients used in the page contain two muted colors, allowing the text to pop. Two additional colors are used throughout the page to provide pops of color without being overwhelming.

Legibility is key. Ensure that regardless of the type of gradient you choose, the content over it is easy to read.

Consider stacking text and buttons to one side of the section where the gradient is used. If using light text, place a darker color underneath.

The Divi Whiskey Distillery layout pack is a great example of balancing a background gradient with a text overlay.

Using a darker background gradient with a light text overlay results in an eye-catching and effective design.

Combine gradient directions, types, units, and colors to create unique design options.

Check out our blog post on How To Combine Divi's Background Gradient Builder, Masks and Patterns for a great example of combining these elements to create stunning designs.

Check out our blog to learn more about the Divi Gradient Builder and how to incorporate gradients into your website. There are great posts, including freebies and in-depth tutorials.