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.

Premade Layouts

Check Out These Related Posts

44 Comments

  1. Wow, this looks awesome! Can’t wait to use it on my next project!

  2. Another feature already, haha. Well worth the wait, this looks very promising!

    • It’s wonderful! Divi is the best!

  3. Thanks for this update! Simple, but nice!

  4. Tight!

  5. Great feature, but I’m waiting for the gradient feature to work over background video. It’s super disappointing that this updated feature doesn’t.

  6. It’s a great update. Sometimes clients ask for it and we had to do it manually.
    Now we have got the options directly.
    Thanks Nick and Divi Team

    • This small feature can change the whole website big! Thanks

  7. Whatsapp & Telegra share and 1 row inline optin!

  8. Great new functionality with the already good gradient tool. Nice!

  9. After 2 years We get this feature thank divi for this

  10. Awesome! Now I can recreate the Instagram background in the social follow icon module

  11. Great but it is certainly desperate that a great product like DIVI does not focus on utilities as important as Flex Box, CSS Grid or focus a little more on Breakpoints. For God’s sake, it’s 2022! You have to do something about it.

    • We have some big and transformative updates in the works (multi-year projects that are well underway). In the meantime, we’ll also have some small updates like this coming out to keep things moving forward!

      • Thanks Nick, but for it to be even more of a great product it needs that touch. It is much needed, unfortunately DIVI lacks a lot of responsive control.
        regards

    • Agreed. Is the gradient feature nice? Yes it is.

      But there are like 100 basic things and modules I can think of that are more necessary and important than this. The focus here on those advanced features just doesn’t feel right.

      Would be nice if ET would ask the community what they really want. Or track how many people actually using these features, I’m sure it’s not a lot.

  12. I am very for this development. Each update gives me more reasons to introduce Divi to people around me.
    Great Team!

  13. Dope.

  14. Brilliant — loving the updates lately from Divi!
    well done team!

  15. OOOOHHHH! I’m looking forward to playing with this!

  16. Yes! Another great feature. Thanks guys. Already thinking ‘bout creatives with this one. Keep up the great work.

  17. It’s little tweaks like this (and by little, I still realise that a lot of work went into it) that keeps me excited about Divi! So many new possibilities and variations to add my own design style!

  18. hey nice i have one Question:

    How can i transfer a gradient from one section/row/module to another?

  19. Thanks 🤘🤘🤘

  20. Thank you! It´s so useful!!

  21. Hi Nick,
    Thanks for this update. I was expecting for that gradient feature being applicable to text in any module.
    Anytime soon ?

  22. I updated today and all my past set gradients on all my social icons are gone. Just the plain default gradients show.
    I had to do a backup reset on my site to get them back. I will wait for the bug update or an answer.
    Thanks.

    • Well, at least I’m not the only one with this issue.

      • I have this problem too.

  23. Hello, thanks for update, WHEN FIX FOR CLS problem with DIVI when using Google Page Speed Insights, I’m tired of fixing it manually.

  24. thanks very nice, but how to use the json file download in the gradient pack ?
    you just say : “You can easily copy and paste these gradients and use them on any element!”

  25. Great feature but quite tricky to use compared to before and it literally causes errors on all pages where gradients have been used before as soon as you edit those. Terrible update, please fix backward compatibility, I do not want to fix 100+ pages 🙁

    • Agreed, I have the same issues on all my websites.

    • Agreed, I have the same issues on all my websites.

  26. The new gradient builder causes issues in column widths for my specialty sections. Any one else notice this and have any fixes?

    • I had that happen too. Gradients that went from gray-to-white suddenly became green-to-blue. Right-hand columns moved to the bottom of the page, most likely because of the width issue you mentioned.

  27. The new gradient tool is great but now all of my existing gradients have reverted to the blue/green default gradient. Is there a way to get my custom gradients back? Each of my gradients is custom to specific page content so I don’t want to set a new default that will make them all the same.

  28. I had an issue when I updated to version 4.16 with the new gradient settings overriding everything on my website and going back to the default blue/green colors. I rolled back to the previous version because I would get an error when I tried to save the page after making the changes.

  29. I have the same issue with about half of my sites. All instances where I have used gradients are now using the default colors. This ranges from buttons to backgrounds and there is no way I’m going back to fix 100 pages. Please respond to all of us with a fix or an update.

    • I have this problem too.

  30. Gradient to video background?

  31. The repeating gradient feature combined with the new background patterns is exciting! I’m looking forward to coming up with some unique designs.

Join To Download Today

Pin It on Pinterest