Gradient in css3

[dare87]

I am having a problem with my gradient in IE. I am not sure what I am doing wrong, but I'm sure it's an easy fix.

 

The site is svmrestore.com

 

Here is the code in questions.

 

#header_wrapper {
box-shadow:0 2px 3px #212121;
-moz-box-shadow:0 2px 3px #212121;
-webkit-box-shadow:0 2px 3px #212121;
background-color:#e1dfdf;
background:-moz-linear-gradient(top, #e1dfdf 0%, #bcb7b7 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e1dfdf), color-stop(100%, #bcb7b7));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '$color-1', endColorstr = '$color-2', GradientType = 0);
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size:14pt;
font-weight:300;
height:120px;
position:relative;
z-index:300;
}

 

Looks great in FF and Chrome. Looks blue in IE

 

Thanks in advance for your help.

[sunfighter]

Gradients do not work in IE9 or less.

[Frank P]

Gradients do not work in IE9 or less.

 

Filter gradients do. But I wonder whether the variables $color-1 and -2 were rendered as hexa numbers.