CSS3 gradient rendering issues from transparent to white

user_676991 0
Viewed 32849

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): Safari 6 Mac OS 10.8

Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os): Chrome 21 Mac OS 10.8

Any ideas or suggestions on why this odd rendering might be?

gradient css
5 Answers

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.

user_27888960
user_51199160

I've recently encountered the same issue regarding transparency on safari. What worked for me was substituting the css into the compiled safari css.

This didn't work for me

 background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)

This did work for me

background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)
user_57187910
Related