Add a gradient to a row or column background

You can add a gradient as the background color of a row or column by copying and pasting some CSS from a gradient tool.

To add a CSS gradient as a row or column background, you need to do the following:

  • 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:

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

  1. Open your row or column for editing and click the Advanced tab.
  2. 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.
  3. Click Save.

Add the custom CSS for the gradient

Copy and paste the CSS rule below, with the following changes:

  • Replace the class name in the first line with your own class name.
  • Replace the rule contents with the gradient code that you copied.

See the Related Article on where to put custom CSS code.

Template CSS rule for a row gradient

.kb-gradient {
/* Replace this portion of the rule with the CSS for your gradient */

  background: #a90329; 
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); 
  background: -webkit-linear-gradient(top, #a90329 0%,#8f02  22 44%,#6d0019 100%); 
  background: linear-gradient(to bottom, #a90329 0%,#8f0222   44%,#6d0019 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); 

/*end replace*/

At this point, you should see the row or column on your page take on the background gradient color.