Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Gradients with Transparency behaving differently in Firefox

Take a basic radial gradient that ends in transparency, and it acts differently in Firefox to all other browsers. I made a lovely multi-gradient background in Firefox and it looks awful everywhere else. I can't understand why it renders different and if there is a way to make it look nice and/or the same on all browsers? Need a CSS guru here.

Here is an example with a background color of black: (http://www.screencast.com/t/yyeP4258ikn)

And my code:

background: radial-gradient(palegoldenrod, transparent);

EDIT: Noticed the problem applies to linear gradients also

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

It becomes readily apparent with ```background: radial-gradient(circle closest-corner at 100px 100px, palegoldenrod, rgba(0,0,0,0.5));

Left is the effect I'm trying to achieve, a subtle blend, right is how all browsers but Firefox display it

http://www.screencast.com/t/qEUG5e6tEO

2 Answers

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Found the answer. Firefox appears to be the only browser still handling transparency in the old style, i.e. fading through grey to a value of rgba(0,0,0,0). In contrast, it appears as though Chrome interprets any request to fade to 0% opacity as a request to fade THROUGH the current color to transparent. In most instances, this makes more sense, as seen in the screenshot below, where a fade to the keyword transparent (which corresponds to rgba(0,0,0,0)) does not give the intended result in Firefox (on left)

http://www.screencast.com/t/10CuXbYjA3g

However, the fact that even implicitly specifying a value of rgba(0,0,0,0) would not give a transition through grey to transparent I consider to be somewhat buggy behaviour, but CSS gradients still being somewhat new, is forgivable. What I actually required to make the code work correctly was to create an extra color stop of semi-transparent grey between the color and the transparency to force a transition through grey:

background: radial-gradient(circle closest-corner at 75px 75px, palegoldenrod, rgba(127,127,127,.5) 50%, rgba(0,0,0,0) 100%);

Martin Kalnis
Martin Kalnis
14,834 Points
Martin Kalnis
Martin Kalnis
14,834 Points

Have you tried specifying the farthest-corner or closest-corner, depending on the style your trying to achieve.

background: radial-gradient( circle farthest-corner ,palegoldenrod, transparent);

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Yes I have, it makes no difference, I believe I've found the issue to be related to how the gradient approaches transparency.

This is background: radial-gradient(gold, transparent); on an empty div with no background. I want the effect on the left and all other browsers give the effect on the right. I've tried setting rgba(0,0,0,0) but it still gives the same result. I WANT a transition from color to black with 0 opacity, but from appearances, it seems as though just the opacity is changing and not the colour. I don't have full knowledge of how an alpha channel works and I don't know why this occurs.

http://www.screencast.com/t/10CuXbYjA3g