Home/ Questions/Q 8351833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:46:01+00:00

I am having issues with cross browser rendering of CSS3 gradients. This is happening

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).

    • 0