54

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?

phawk
  • 1,321
  • 1
  • 13
  • 12

5 Answers5

92

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).

starball
  • 20,030
  • 7
  • 43
  • 238
wavetree
  • 1,531
  • 1
  • 13
  • 17
  • 3
    I had this issue in which Safari was rendering `transparent` differently than every other browser I checked. Thanks for the tip! – HoppyKamper Feb 06 '16 at 21:04
  • 16
    I believe you can actually use `rgba(255, 255, 255, 0)` to get true transparency - it works for me anyway :) – RB. Aug 23 '17 at 16:05
  • This is an old post. Browsers have since fixed their transparency-related bugs, and now this works: https://codepen.io/peiche/pen/mMKaLP – wavetree Aug 23 '17 at 21:46
  • 16
    Unfortunately, 'transparent' still doesn't work in Safari, not even in Safari TP. This is because 'transparent' is treated as 'transparent black'; specifying an actual color with alpha of 0 works. – Jessidhia Feb 05 '18 at 09:13
  • 1
    @Kovensky I managed to fix Safari issue using rgba with 0 alpha for same color it transits to. E.g. in case you want gradient from transparent to lime (`rgb(0, 255, 0)`), use this: `background: linear-gradient(top, rgba(0, 255, 0, 0), lime)` Hope this can help. Edit: just noticed you are talking about same fix, sorry :) – Zudwa Feb 08 '18 at 12:39
  • Works also with `rgba(255,255,255,0)`! – Pioz Feb 18 '19 at 09:19
30

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.

phawk
  • 1,321
  • 1
  • 13
  • 12
  • This explanation (transparent is black with 0 alpha) doesn't appear to be accurate. Try a gradient from black to transparent on a black background using 255, 255, 255, 0 as transparent. It'll be very light. – Lucent Aug 25 '20 at 04:09
5

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.

WEBjuju
  • 5,797
  • 4
  • 27
  • 36
3

The same problem is encountered on native IOS as well:

  1. iOS White to Transparent Gradient Layer is Gray
  2. https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

I notice that on CSS the solution is to use white color instead of black and then add 0 transparency

rgb(255 255 255/0)
iTaMaR
  • 189
  • 2
  • 10
1

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%)
Apophis
  • 433
  • 1
  • 6
  • 14