Comparing the Gradient Types in Divi’s Gradient Builder

Comparing the Gradient Types in Divi’s Gradient Builder

Gradient types are part of the new Divi Gradient Builder. The new Divi gradient types give you the ability to add different shapes and colors to your backgrounds. In this post, we’ll compare these gradient types and show you how to use them to create unique backgrounds!

Let’s get started.

What Are Divi Gradient Types?

Divi’s new Gradient Builder adds several new gradient features that include gradient types. There are four gradient types to choose from:

  • Linear
  • Circular
  • Elliptical
  • Conical

Each of the types displays the gradient differently. They’re used to shape the gradient to display as a linear color pattern, in a circle, an ellipse, or a cone. We’ll see these in detail in our examples.

What Are Divi Gradient Types

The gradient types are also affected by the other controls, such as the position, whether or not it repeats, the unit of measurement for the gradient slider bar, and placing the gradient above the background.

What Are Divi Gradient Types

Every adjustment can have a small or huge impact on the gradient. The gradient can be subtle, or it can stand out. Small or large changes can be made with a single adjustment.

With this in mind, let’s look at a few examples of gradients using each of the gradient types. We’ll show three examples of each gradient type. The first will be a standard type of gradient you’d see across the web. The next two will be a little more experimental, just to see what can be done with the gradient types.

Gradient Types Examples

For the gradient type examples, I’m using the hero section from the landing page of the free Bed and Breakfast Layout Pack that’s available within Divi. This section already has a gradient, but we’ll replace it and do some experimenting. We can either delete the original background gradient or modify it. The results are the same. For simplicity, I’ll modify it.

Gradient Type Examples

I customized the title text, changing it from black to white.

Gradient Type Examples

Linear Gradient Type




This article was written by Randy A. Brown and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top