Donate

CSS Linear Gradients Not Working In Internet Explorer 9 But Working In Firefox And Chrome

I came across with linear gradients not working correctly in IE 9. One solution suggested by a popular forum is to utilize an image as the background of a particular element. Since I'm not a graphic designer, I searched for other solution. I came up with an alternative which is to embed an svg file instead of an image file as an element's background. The css code below won't work in IE 9.
body   
 {  
    background-image: -ms-linear-gradient(top, #000, #666);  
 }  
Here's a solution using .svg file:
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">  
  <linearGradient id="g762" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">  
   <stop stop-color="#000000" offset="0"/><stop stop-color="#666666" offset="1"/>  
  </linearGradient>  
  <rect x="0" y="0" width="1" height="1" fill="url(#g762)" />  
 </svg>  
Usage:
 body   
 {  
    background-image: url('./gradient.svg');   
 } 
Output
CSS Linear Gradients Not Working In Internet Explorer 9 But Working In Firefox And Chrome

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.

Invalid nested tag div found, expected closing tag input