Sterling custom gradient color design

Overview

This Article outlines how to create a custom gradient color scheme for the Sterling WordPress Theme. Simply grab the code below and drop it into the ‘Custom CSS’ section of Sterling’s Site Options Panel: Appearance > Site Options > Styling and CSS > Custom CSS

Custom Gradient – CSS Code:


.top-aside,
.banner,
.small_banner,
.banner-slider,
footer {
background-color: #0077af;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#01b2d3), to(#0077af));
background: -webkit-radial-gradient(circle, #01b2d3, #0077af);
background: -moz-radial-gradient(circle, #01b2d3, #0077af);
background: -ms-radial-gradient(circle, #01b2d3, #0077af);
}

*Please notice that the color used for “background-color” is the same color used as the “second color” in the gradient.

Happy Coding!