Por comodidad suelo usar la herramienta online para generar degradados, la cual te permite hacer degradados de una manera muy visual y obtener el código en CSS.
El otro día me fijé que existe una opción (IE9 Support) que me ha funcionado en anteriores versiones de IE y la verdad es que esta opción pasa bastante desapercibida, aunque probablemente algunos ya conozcan.
Este agrega a nuestro CSS lo siguiente:
Cita: background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgog ICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNT c5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcG FjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3Rv cC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+Ci AgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3 ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEi IGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZX JhdGVkKSIgLz4KPC9zdmc+);
Como verán, se trata de un xml en base64, que si decodificamos, nos dará lo siguiente:
Código XML:
Ver original<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>
<stop offset="50%" stop-color="#2989d8" stop-opacity="1"/>
<stop offset="51%" stop-color="#207cca" stop-opacity="1"/>
<stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>
Evidentemente la mejor opción seguirá siendo utilizar CSS3, pero esta alternativa/hack para IE es bastante rápida, limpia y más flexible que usar imágenes.
La url es:
http://www.colorzilla.com/gradient-editor/
Un saludo