Not a lot of people are totally aware of using CSS box-shadows to create gradient-like effects for browsers like IE9. While box-shadows are NOT a replacement for gradients, they do offer us an alternative to produce some nice effects with standards compliant code.
Small UI elements like buttons and navigation items are a great place to use this technique. Just be mindful that abusing chained box-shadows or using box-shadows on large elements can slow your page down.
No vendor prefixes are needed for IE9 although Android and older versions of mobile iOS require -webkit- to render box-shadows. We are using Sass so Compass will take care of the prefixes for us.
Beyond just being a cool trick this technique will also help keep our CSS light in comparison with the CSS needed when using actual gradients.
<button>Look mom no gradient filter in ie9!</button>
Sass w/ Compass
//import compass css3 mixins @import compass/css3 //color scheme $linkColor: #00aae8 button border: none padding: 10px background: $linkColor color: #FFF font-weight: bold cursor: pointer border: 1px solid darken($linkColor, 15%) border-radius: 10px +box-shadow(inset 0 -20px 30px -10px darken($linkColor,20%)) &:hover +box-shadow(inset 0 -20px 30px -10px darken($linkColor,15%)) &:active +box-shadow(inset 0 20px 30px -10px darken($linkColor,5%))