css3.css

.box-gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}

.ff2 .box-gradient, .ff3 .box-gradient, .opera .box-gradient {
  background-image: url("../images/gradient.svg");
}


.box-shadow {
  -moz-box-shadow: 0px 1px 0px #000000;
  -webkit-box-shadow: 0px 1px 0px #000000;
  box-shadow: 0px 1px 0px #000000;
  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=1px, Color='#000000');
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=1px, Color='#000000')";
}


.box-inner-shadow {
  -moz-box-shadow: inset 0px 1px 10px #000000;
  -webkit-box-shadow: inset 0px 1px 10px #000000;
  box-shadow: inset 0px 1px 10px #000000;
}


.rotate {
  -moz-transform: rotate(7.5deg);
  -o-transform: rotate(7.5deg);
  -webkit-transform: rotate(7.5deg);
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=7.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=7.5)";
}

css3.sass

=ie-linear-gradient($start, $end)
  filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorStr='") $start unquote("', EndColorStr='") $end unquote("')")
  -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorStr='") $start unquote("', EndColorStr='") $end unquote("')")

=box-gradient-legacy
  background-image: url("../images/gradient.svg")

=box-shadow(!x = 0px, !y = 1px, !blur = 0px, !color = #000000)
  -moz-box-shadow = !x !y !blur !color
  -webkit-box-shadow = !x !y !blur !color
  box-shadow = !x !y !blur !color
  filter =  "progid:DXImageTransform.Microsoft.dropshadow( OffX=" !x, "OffY=" !y, "Color=" !color ")"
  -ms-filter = "progid:DXImageTransform.Microsoft.dropshadow( OffX=" !x, "OffY=" !y, "Color=" !color ")"

=box-inner-shadow(!x = 0px, !y = 1px, !blur = 10px, !color = #000000)
  -moz-box-shadow: "inset" !x !y !blur !color
  -webkit-box-shadow: "inset" !x !y !blur !color
  box-shadow: "inset" !x !y !blur !color


=rotate(!degree = 7.5)
  -moz-transform = rotate(!degree "deg")
  -o-transform = rotate(!degree "deg")
  -webkit-transform = rotate(!degree "deg")
  filter = "progid:DXImageTransform.Microsoft.BasicImage( rotation=" !degree ")"
  -ms-filter = "progid:DXImageTransform.Microsoft.BasicImage( rotation=" !degree ")"


.foo
  +box-gradient(#444444, #999999)
  +box-shadow(0px, 1px, 0px, #000000)
  +box-inner-shadow(0px, 1px, 10px, #000000)
  +rotate(7.5)

gradient.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<linearGradient id="background_gradient_black" gradientUnits="userSpaceOnUse" x1="0.4995" y1="0" x2="0.4995" y2="60.0005">
	<stop  offset="0" style="stop-color:#000000;stop-opacity:0" />
	<stop  offset="1" style="stop-color:#000000;stop-opacity:0.5" />
</linearGradient>
<rect fill="url(#background_gradient_black)" width="100" height="100" />
</svg>