CSS3 radial gradient displaying different in different browsers
I'm trying to use a radial gradient background for my website, it displays
alright in Firefox but it displays differently in Chrome and IE. Anyway
below is how it looks in Firefox (what I want it too look like) and how it
looks for IE and Chrome. I used the Ultimate CSS gradient generator to try
and maintain cross-browser compatibility. This is the code I'm using for
the gradient.
background: #0e0e0e; /* No gradient support */
background: -moz-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(234,211,0,0.6)),
color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+
*/
background: -o-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6)
0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,
rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(234,211,0,0.6)
0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ead300', endColorstr='#00ffffff',GradientType=1 ); /*
IE6-9 fallback on horizontal gradient */
Below is the result in different browsers:
Firefox
Chrome and IE
Does anyone know of any solutions to make it look similar in Chrome and IE?
No comments:
Post a Comment