Blog

CSS Gradient Shading Explained

Posted on in Uncategorized

1214853_77179381Gradient shading is a common web design technique. It is used to show depth on an otherwise flat looking web page. Gradient shading can be used to improve the usability of interactive page elements such as buttons. In contemporary web design, can be used to achieve attractive gradient shading on web pages and elements.

In CSS, the background of an element can be manipulated. It can be declared a solid color, or in this case, a gradient. Declaring gradients in CSS is preferred over using an image file because it improves both appearance and performance.

Typically, a gradient features one color that fades into another color. However, in CSS, every aspect of a gradient can be controlled. Aspects that can be controlled include how the gradient fades, direction and colors and where the color changes occur. You can create some stunning, advanced gradients with CSS.

In CSS, declaring a gradient requires the use of the background-image. If you are used to declaring a solid color in CSS, you know that this uses the background-color property. Here is a simple example from CSS-Tricks:

.gradient {

/* can be treated like a fallback */
background-color: red;

/* will be “on top”, if browser supports it */
background-image: linear-gradient(red, orange);

/* these will reset other properties, like background-position, but it does know what you mean */
background: red;
background: linear-gradient(red, orange);

}

While browser support for CSS gradients is generally good across most browsers, you do need to consider different browsers when implementing CSS gradient shading for optimal performance across browsers. Here is a good example of a linear gradient from CSS-Tricks that takes browser compatibility into consideration:

.gradient {

/* Fallback (could use .jpg/.png alternatively) */
background-color: red;

/* SVG fallback for IE 9 (could be data URI, or could use filter) */
background-image: url(fallback-gradient.svg);

/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
background-image:
-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background-image:
-webkit-linear-gradient(left, red, #f06d06);

/* Firefox 3.6 – 15 */
background-image:
-moz-linear-gradient(left, red, #f06d06);

/* Opera 11.1 – 12 */
background-image:
-o-linear-gradient(left, red, #f06d06);

/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image:
linear-gradient(to right, red, #f06d06);

}

Look confusing? Don’t worry, there are tools like Autoprefixer that do a lot of the work for you. With this tool, you can select which browsers to support for your CSS gradient shading. Knowing what browsers the majority of your web traffic uses can be helpful in cutting down on the amount of code you’ll need to use for your CSS gradient shading.

If you don’t currently use gradient shading on your website, you should consider it. Gradient shading can add depth and increase the usability of your overall web design.

Where do you find gradient shading to be most effective in web design?

Leave a Reply

What our clients are saying

I want to thank you for your help with our website development project. Your programming skills, attention to detail, and ability to interact directly with our client were excellent. You have provided tremendous value to my organization. With a project of this magnitude, including the use of web services to push data out to 19 sub-websites, your ability to overcome our unique challenges and coordinate with my IT team was exceptional. I appreciate your help, and I am certain that your expertise was key to the project's success. Thanks again, I look forward to working with you on our next endeavor!

~ John Forgione – Executive Vice President – SFA Marketing, Inc.

Read More