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.

HTML

<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%))

Click here for the demo.