Geek Answers Handbook

Smooth Gradient Gradation

Im using chrome 18.0.1025.162 and trying to make a radial gradient

 -webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

The problem is that the gradient is very pixelated, the transition to color and alpha is in blocks and is not smooth. This is different from Safari and Firefox. Safari and Firefox do it very smoothly and well.

Is this a bug with chrome? Someone has the same problem. Its such a simple gradient! Of course, something simple like this cannot be a glitch

Check out: http://jsfiddle.net/GyRLe/1/ to demonstrate what I mean.

Is there a solution for this? The image would be terrible :(

(Good to see how bad the smoothness is): This is what I get when I use it: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari) (It seems a little sharp, but this is due to png, otherwise it is close to perfect smoothness)

Firefox is just as good as Safari, its just chrome does it bad. I need alpha because Im puts a repeat style image in the background

Edit: Chrome 20 (Canary) also had this terrible issue!

Edit2: the reason we use CSS, so we don’t need to use images! So I added this to http://code.google.com/p/chromium/issues/detail?id=123491 and hopefully Google will act directly because I think chrome is wonderful.

+8
google-chrome safari css3
source share
3 answers

I know that it was published a long time ago, but I ran into the same problem (strong bandage) with Chrome 24 using:

 -webkit-radial-gradient(center, ellipse cover, #XXXXXX 0%,#YYYYYY 100%);

But I realized that using code below the range has almost disappeared:

 -webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

Hope this helps.

Edit: I saw that -webkit-gradient (radial, ...) is just the old syntax for displaying a radial gradient, so it should not be a long-term answer to this problem ...

+1
source share

If you don't need the alpha value, it looks smoother using rgb instead of rgba .

Demo: http://jsfiddle.net/tKtV9/

+2
source share

In this case, it doesn’t help much, but I noticed that adding

 width: x-value; height: y-value;

can sometimes help. The X-value and Y-value, of course, are your measurements.

0
source share

More articles:


All Articles