CSS3 gradient rendering issues from transparent to white
I am having issues with cross browser rendering of CSS3 gradients. This is happening when I am trying to create a gradient from transparent colour to white.
The file I am using to test with is: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html
CSS used is:
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
Rending looks like what I want in Safari 6 (mac):
Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):
Any ideas or suggestions on why this odd rendering might be?
Solution 1:
I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);
Instead of giving Chrome a "transparent" value, give it something very, very close to transparent. Hope this helps!
Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).
Solution 2:
The CSS I pasted in here was wrong, I was editing the wrong file DOH!
Original CSS not working
background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
CSS that fixed the problem
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
Problem being transparent isn't a colour, it is black with 0 alpha, setting to specifically white with 0 alpha fixes the issue. (thanks @carisenda)
This still points on inconsistencies with how browser vendors are dealing with alpha transparency in CSS3 gradients.
Solution 3:
The trick with a color besides white (and with white actually) is to rgba
the actual color that is fading.
background-image: linear-gradient(to right,
rgba(111,174,249, 0) 0%,
rgba(111,174,249, 0) 80%,
rgb (111,174,249) 100%);
In case the color being used is hex (like #6faef9
) use a hex to rgba converter to convert the color.