Add a gradient to a row or column background
Build WordPress websites easier with our drag-and-drop page builder.
Visit wpbeaverbuilder.com today!
Note: As of Beaver Builder 2.2, you can add gradients to row and column backgrounds in the regular settings. For more complex gradients, or to add gradients to modules that don't have the gradient setting such as the Content Slider module, you can still use the gradient techniques described here.
The easiest way to add a gradient as the background color of a row or column is to copy or paste some CSS from a gradient-generating tool.
Gradients can be variations of a single color:
Or they can use multiple colors:
Or they can even involve shapes. The following screenshot shows a preset radial gradient from gradientgenerator.com, with CSS you can copy.
No matter how involved the gradient, if you're using a tool that generates the CSS, the basic procedure to add the gradient to a row or column background is the same.
To add a CSS gradient as a row or column background in Beaver Builder:
- Get the CSS for your gradient.
- Add a custom CSS class to your row or column.
- Add the custom CSS for the gradient.
Get the CSS for your gradient
There are many gradient generators on the internet that generate CSS code. Here are just a few:
- Ultimate CSS gradient generator: http://www.colorzilla.com/gradient-editor/
- Gradient generator: http://gradientgenerator.com/
- Web gradients: https://webgradients.com/
- UI gradients: https://uigradients.com/
Once you've generated the gradient you want, copy the CSS and save it somewhere.
Add a custom CSS class to your row or column
- Open your row or column for editing and click the Advanced tab.
- Scroll to the CSS selectors section and enter a custom name in the Class field. (Do not use a period.)
It's a best practice to add a custom prefix to your class names to avoid conflict with other class names used by the theme and plugins. In this example, we'll use the class name
kb-gradient. Repeat this step for any other rows or columns that you want to have the same color gradient background.
- Click Save.
Add the custom CSS for the gradient
Copy and paste the CSS from the gradient generator and replace the class name in the first line with your own class name.
See the Related Article on where to put custom CSS code.
As soon as you add your custom class name you should see the row or column on your page take on the background gradient color.