CSS Gradient not working IE10+ - html

Question

I have a box that I'm trying to add some gradient to and it works in Chrome and other browsers except for IE10+ Below is my CSS code:
.box-gradient {
position:absolute;
width:100%;
height:100%;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:5px;
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
}
Thanks in advance!!

Answer 1

You have to include a line for IE10+
background: -ms-linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
I have had this issue before. Adding compatibility for gradients can be a very strenuous job. I think you'd prefer using gradient generator

Answer 2

You need an un-prefixed linear gradient for IE10 to read. Something like this:
background: linear-gradient(to left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);

Answer 3

You need to add an unprefixed version as well:
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: -o-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
background: linear-gradient(to right, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
There are plenty of tools available to help you handle various prefixes.