How to Create Gradients in CSS

| October 19th, 2012 | Last Updated:

Finally, the standard is here for creating non-browser-specific CSS gradients across all the latest, standards-compliant browsers!

CSS

.grad{background:linear-gradient(#40b3ff, #09f)}

HTML

<a href="#" class="grad">Simple Gradient Hurray!</a>

Demo

Simple Gradient Hurray!

(if you’re not seeing a gradient, your browser doesn’t support linear-gradient yet)

So beautifully simple.

Simple Fail-safe for Older Browsers

.grad{background-color:#09f;background:linear-gradient(#40b3ff, #09f)}

background-color:#09f — Use this to set a solid background color for older browsers that do not support CSS3 gradients. Whatever the primary color of the gradient is suppose to be. Better than it just resolving to a default or transparent background.

Fully Cross-browser-friendly Version

https://css-tricks.com/css3-gradients/ — CSS-Tricks is a wonderful and rich site for web designers and this is a good technique. I personally just do not like using proprietary (browser-specific) code. I’m a purist in that sense.