Add a Gradient to a Row Background

To use a CSS gradient as a row background, you need to do the following:

• Get the CSS for your gradient.
• Add a custom CSS class to your row.
• Add the custom CSS for the gradient.

Get the CSS for your gradient

We like using this CSS Gradient Generator Tool. You can choose from preset gradients or enter your own colors. Once you’ve generated the gradient you want, copy the CSS to the clipboard and save it somewhere.

Add a custom CSS class to your row

1. Open your row for editing and click the Advanced tab.
2. Scroll to the CSS selectors section and enter a custom name in the Class field.
   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 ss-gradient-row. Repeat this step for any other rows that you want to have the same color gradient background.
3. Click Save.

Add the custom CSS for the gradient

1. In the upper right corner, click Tools, and do one of the following:
   • If you only want to add this gradient background to one or more rows on a single page, click Layout CSS / JavaScript.
   • If you want to add this gradient to rows throughout your site, click Global Settings > CSS.
2. Copy and paste the CSS rule below, with the following changes:
   • Replace the class name with your own class name.
   • Replace the rule contents with the gradient code that you copied.

Template CSS rule for a row gradient

.ss-gradient-row {


/*Replace this portion of the rule with the CSS for your gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
/*end replace*/


}

 

Last updated on Dec 12, 2016