Css3 Gradient Rendering Issues from Transparent to White

CSS3 gradient rendering issues from transparent to white

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

CSS3 Gradient with transparency not displaying correctly in Safari

Try:
background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);

Edit: sorry OP, that still doesn't look the same as your gradient although it is the correct colors, the gray middle just turned to a white middle. The solution I found was:

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);

222,98,48 is the rgb value of #de6230 so this should work. It's transitioning from your color at 0% alpha to your color at 100% alpha.

Transparent gradient not working in Safari

This issue is known and best explained in the link below:

https://css-tricks.com/thing-know-gradients-transparent-black/

Below are few related links on github for the same issue:

https://github.com/jakubpawlowicz/clean-css/issues/315

https://github.com/Compass/compass/issues/2010

Eventually I believe that you need a work around to do so until they come up with a fix in future releases.

Best Wishes

CSS3 Gradient - grey instead of white

As Chris Coyier himself mentions at the end of the article you're linking, the keyword transparent is really rgba(0,0,0,0), so that's transparent black. When you create a gradient from white to transparent black, the result is gray.

You must transition from white to rgba(255,255,255,0), which is transparent white.

http://jsfiddle.net/FnfTA/

Gradient from transparent to color in CSS

Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.

In the final 2014 syntax:

background-image: linear-gradient(to right, transparent, white);

Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.

Chrome leaves white space/gap in between when rendering multiple gradients

I don't have any official sources to back this answer (not as yet, I am trying to find and will add here if I manage to find) but I've seen similar issues in Chrome in the past and they seem to because of how the calculated values are rounded in Chrome. Rounding is being done here because background size is 50% in both X and Y axis and the calculated values for 50% are fractions. The calculation is provided as inline comments within the snippet below.

Blink/WebKit seems to round down the calculated value irrespective of whether it is above 0.5 or not. In this demo, the total height of the element is 124.8px and the width is 133.12px. So, the 50% values become 62.4px and 66.56px (which are getting rounded down to 62 and 66px). The third div in the snippet has these values set explicitly as the background-size and we can see how its output looks same as the first one (which has background-size: 50% 50%) and thereby proving the explanation.

When the values are thus rounded down, the actual area occupied by the background horizontally is 132px (which is 1.12px less than the actual width) and that vertically is 124px (which is 0.8px lesser than the actual height). Thus it leaves a gap in between.

This blog post by John Resig also gives some insight on how rounding is handled in browsers. As we saw, Blink/WebKit is rounding down whereas IE seems to be rounding it up. Rounding up means the calculated values would become 63px and 67px and this wouldn't visibly show any problems because the color on all sides are the same and so they just overlap and fill the space (Chrome also shows no issues when we explicitly set these values for background size - refer second div). Firefox seems to have a comprehensive rounding logic which seems to round up some while some other get rounded down in-order to completely fill space and hence shows no issues too.

div {

 background: #58a;

 background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,

             radial-gradient(circle at top right, transparent 15px, #58a 0) top right,

             radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,

             radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;

 background-size: 50% 50%;

 background-repeat: no-repeat;

 

    width:4em;            /* 83.2px */

    height:4em;           /* 83.2px */

 padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */

 max-width: 12em;

 color: white;

 font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */

}

/* so,

total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)

total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)

*/

div:nth-of-type(2) {

  background-size: 67px 63px;

}

div:nth-of-type(3) {

  background-size: 66px 62px;

}

div{

  display: inline-block;

  margin: 10px;

}

<div></div>

<div></div>

<div></div>

---

Related Topics