CODEWITHSUNDEEP
htmlcss
mdixon18
mdixon18

Reputation: 1219

CSS Gradient disappeared in Internet Explorer

Well, I'm trying to use a simple gradient which appears very nicely on most browsers. However on internet explorer which is on my laptop version 11; currently where the gradient is supposed to be is just nothing an empty space. I thought this was the correct way to display gradients across browsers amd i missing something?

Here is my gradient:

background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;

Upvotes: 0

Views: 135

Answers (1)

Ming
Ming

Reputation: 4588

Your syntax for linear-gradient is incorrect. use to top to indicate directionality.

http://jsfiddle.net/XHs2g/

background-image: -moz-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -o-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: -webkit-linear-gradient(bottom, #292929 0%, #292929 50%, #333 50%, #333 100%);
background-image: linear-gradient(to top, #292929 0%, #292929 50%, #333 50%, #333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333',GradientType=0 )!important;

Upvotes: 1

Related Questions