How To Create Advanced Stunning Gradients With Divi

Blair Jersyer Divi Tutorials Mar 31, 2022

To create more complex gradients, you can use the new Advanced Gradient Builder control type in the Visual Builder. This control type gives you access to new gradient options and multiple color stops. It's a short and sweet feature, but we're really pleased with the new UI and think you'll enjoy it!

How To Use The New Gradient Builder

Gradients in Divi used to be controlled by a simple control type. You can pick a starting and an ending color for the gradient, as well as one of several gradient types. Multiple colors stops, repeating gradients, new gradient types, and new gradient positions are just some of the features of the new gradient builder.

It's a breeze to use the new control. To add a new color stop, simply click on the gradient slider. Add as many colors as you like, move them around with a dragging motion, and tweak their hues with a click. The gradient and individual color stops can also be right-clicked to perform actions like "find and replace," "extend styles," "delete colors, and so on."

Use Multiple Color Stops To Create A Variety Of Gradients

Using multiple color stops, you can create a wide range of new gradients. You can add as many color stops as you want and control their position within the gradient slider. Using multiple colors, it’s easy to create beautiful, glowing backdrops that were never possible before.

Create Amazing Websites

With the best free page builder Elementor

Start Now

Create Interesting Effects Using Repeating Gradients

An additional feature of the new gradient builder is the ability to "repeat the gradient." Using repeating gradients, you can create some interesting effects with fine-tuned control over the colors and their positions within the gradient slider. CSS gradients can do a surprising amount of design work. Your imagination will soar as you experiment with the new gradient builder.

Combine Gradients, Masks, And Patterns To Build New Designs

With Divi's recent update, it is now possible to customize the background of your website in a variety of ways. You can create some stunning layouts by using gradients, images, masks, and patterns. The use of gradients on modules, columns, rows, and sections allows you to create a layered effect. Divi's background options have a lot of interesting interplay because of the way they overlay each other. You can see how the new gradient builder takes on a new life by placing gradients on top of background images and below background patterns and masks.

The Gradient Pack Is Available For Download.

Looking for a simple way to add some stunning gradients to your website? Look no further! The gradients in our gradient builder demo are all included in this free gradient pack. These gradients are simple to copy and paste and can be applied to any element!

DOWNLOAD THE LAYOUT

The Advanced Gradient Builder For Divi Is Now Available

Update Divi now and let us know what you think of the new gradient builder. Make sure to follow and subscribe to our blog so that you don't miss out on any new Divi features that we release in the future. Before making any changes to your website, I always take the time to walk you through each feature in great detail. Divi users should definitely check out these videos and articles.