Create Stunning Gradients In The Visual Builder
The New Gradient Builder Has It All!
Today we are excited to release the Advanced Gradient Builder for Divi, a brand new control type in the Visual Builder that allows you to design advanced gradients using multiple color stops and new gradient options. This feature is short and sweet, but we are really happy with how the new UI turned out and we think you are going to have a lot of fun using it!
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.
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!
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.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
The repeating gradient feature combined with the new background patterns is exciting! I’m looking forward to coming up with some unique designs.
Gradient to video background?
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.
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.
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.
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.
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.
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!”
this post may help you
https://www.divilayouts.com/divi-layouts-tag/gradients/
Hello, thanks for update, WHEN FIX FOR CLS problem with DIVI when using Google Page Speed Insights, I’m tired of fixing it manually.
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.
Hi Nick,
Thanks for this update. I was expecting for that gradient feature being applicable to text in any module.
Anytime soon ?
Thank you! ItΒ΄s so useful!!
Thanks π€π€π€
hey nice i have one Question:
How can i transfer a gradient from one section/row/module to another?
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!
Yes! Another great feature. Thanks guys. Already thinking βbout creatives with this one. Keep up the great work.
OOOOHHHH! I’m looking forward to playing with this!
Brilliant — loving the updates lately from Divi!
well done team!
Dope.
I am very for this development. Each update gives me more reasons to introduce Divi to people around me.
Great Team!
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.
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.
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!
Sounds great, can’t wait π
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
Awesome! Now I can recreate the Instagram background in the social follow icon module
After 2 years We get this feature thank divi for this
Great new functionality with the already good gradient tool. Nice!
Whatsapp & Telegra share and 1 row inline optin!
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
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.
Tight!
Thanks for this update! Simple, but nice!
Another feature already, haha. Well worth the wait, this looks very promising!
Itβs wonderful! Divi is the best!
Wow, this looks awesome! Can’t wait to use it on my next project!