Examples of CSS gradient filters for IE

ie_gradients.css

/* Here's some examples of IE filters for backgrounds with opacity. The first 2 chars of the hex value are the
 * opacity values. There are 10 classes to help narrow down which opacity value you might need.
 */

.dark-90 {
  background-color: rgba(0, 0, 0, 0.9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6000000,endColorstr=#E6000000);
}
 
.dark-80 {
  background-color: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
}
 
.dark-70 {
  background-color: rgba(0, 0, 0, 0.7);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000);
}
 
.dark-60 {
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
 
.dark-50 {
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
}
 
.dark-40 {
  background-color: rgba(0, 0, 0, 0.4);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
 
.dark-30 {
  background-color: rgba(0, 0, 0, 0.3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4D000000,endColorstr=#4D000000);
}
 
.dark-20 {
  background-color: rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
}
 
.dark-10 {
  background-color: rgba(0, 0, 0, 0.1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000,endColorstr=#1A000000);
}

// Using sass variables

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$opaque-blue-ms-hex}",endColorstr="#{$opaque-blue-ms-hex}");

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$opaque-gold-ms-hex}",endColorstr="#{$opaque-gold-ms-hex}");¬