Download our Custom CSS Gradient Backgrounds layout pack for Divi.

It is FREEBIE FRIDAY and for this edition, we have created some stylish Divi CSS Gradient Backgrounds that will make any Section, Row, or Module stand out on your Divi website. Best of all, they are easy to customize to fit your brand or site and can be used with any Divi install.

Preview:

We are coming at ya with 3 Divi CSS Gradient Background styles:

Style 1 : Multi-Colored

Here we have a gradient background with 6 color gradients with different positions that create a very Apple design feel that looks great anywhere.

Style 2 : Subtle Animation

With this style we went crazy and animated the gradient to create this subtle effect of the gradient scrolling across the screen. This would work great for a hero section.

Style 3 : Color Shapes

This style combines both linear and radial gradients to create this unique shaped color effect that almost looks like a piece of pure CSS art.

Using the Custom Divi CSS Gradient Backgrounds:

To apply these unique CSS gradients on your Divi Section, Row, or Module is very easy, just follow one of the methods below. Be sure to save your work after each step!

Method 1

Step 1) Import the layout pack into the Divi Library

Similar to importing any layout pack we release, Import the JSON file directly into the Divi Library. Once it is imported you will see that the layout is a 3 Column Row with a styled gradient background and its Code Module that contains the CSS for each gradient background.

Step 2) Copy the Code Module for the gradient style you want to use

This is super easy. Open the layout in the Divi Library. This will launch the Divi Builder and you will see our 3 Columns with a Code Module for each gradient style. If you want to use Gradient Style 1, copy the Code Module containing the CSS and go paste it on the page where you want to use it.

Step 3) Add CSS Class for selected Gradient Style

With you Code Module pasted on the page where you want to add the gradient, open the code module and copy the CSS Class used eg. “.gradient-1”. Now just open the settings for the Section, Row, or Module where you would like that gradient to be applied and post it in the CSS class field on the Advanced Tab.

Step 4) Customize the Colors

When you have the CSS Class added and the Code Module on the page you want, you can easily customize the colors by opening the Code Module and following the instructions in the comments. Alternatively, you can generate your own CSS by visiting one of the links in the Preview at the start of this post.

Method 2

Step 1) Copy or Generate your CSS

Similar to importing any layout pack we release, Import the JSON file directly into the Divi Library. Once it is imported you will see that the layout is a 3 Column Row with a Blurb and its Code Module that contain the CSS in each column.

Step 2) Add the CSS to the Divi Theme Options.

Now that we have our CSS copied, we need to go to the Divi Theme Options and scroll down to the Custom CSS pane at the bottom of the screen. Once there, all you need to do is paste the code and make sure that you did not copy any <style> tags by accident.

Step 3) Add CSS Class for selected Gradient Style

With your gradient CSS pasted on the Divi Theme Options page, edit the page where you want your gradient applied. Now just open the settings for the Section, Row, or Module where you would like that gradient to be applied and paste the CSS class in the CSS class field on the Advanced Tab.