How to make background-image with linear-gradient work on IE 11?

Question

Any idea how I can make background-image with linear-gradient to work on IE 11?

The following code works fine on IE 10 but doesn\'t work on

Answer 1

These are all super great solutions if you are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.

I scowered many resources and finally came across this diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.

Hope this helps someone!