Introducing The Advanced Gradient Builder For Divi

How To Use The New Gradient Builder

The old control type for gradients in Divi was very simple. You could choose a starting gradient color, an ending gradient color, and select from a few gradient types. The new gradient builder allows you to create a whole new array of gradients using multiple color stops, repeating gradients, new gradient types and new gradient positions.

The new control is super simple and intuitive. Just click into the gradient slider to add a new color stop. You can add as many colors as you want, drag to change their position and click to adjust their colors. You can also right click on the gradient and on individual color stops 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 Interesting Effects Using Repeating Gradients

The new gradient builder also comes with an option to “repeat gradient.” With fined-turned control over colors and their positions within the gradient slider, you can craft some really interesting effects using repeating gradients. You might be surprised what you can design using CSS gradients alone. The more you play with the new gradient builder, the more creative ideas you will come up with.

View More Gradient Demos

Combine Gradients, Masks And Patterns To Build New Designs

Divi now comes with an impressive range of background design options. Using background gradients, images, masks and patterns, you can create some amazing layouts. You can even layer different gradients on top of each other by applying gradients to modules, columns, rows and sections. There is a lot of interesting interplay between Divi’s background options due to the way they overlay each other. By placing gradients on top of background images, and below background patterns and masks, you can see the way that the new gradient builder takes on new life.

Download The Free Gradient Pack

Looking for an easy way to enhance your website with some stunning gradients? Download this free gradient pack, including all of the gradients seen in our gradient builder demo. You can easily copy and paste these gradients and use them on any element!

Download The Layout

The Advanced Gradient Builder For Divi Is Available Today!

The new gradient builder is available today, so update Divi and let us know what you think in the comments. Stay tuned for more great Divi features coming soon, and don’t forget to follow and subscribe so that you can be the first to know when our next Divi feature is released. I always give a detailed look into each feature and it’s a great way to get up to speed before you update your website. If you are running your websites on Divi, these are videos and posts you really don’t want to miss.