Question

For reference, see this question: Chrome radial css gradient smoothness.

The OP is having trouble with the smoothness of the gradient, but from the discussion it seems that that’s only when using alpha transparency.

---

Here’s the gradient I’m using:

div {
    background: radial-gradient(
        #000 30%,
        transparent 30%, transparent 40%,
        #000 40%, #000 60%,
        transparent 60%
    );
}

As you can see, it’s using hard stops (so no color transition) and no rgba (so no alpha either). Still, in Chrome (tested in 23 on Windows 7) it’s rendered extremely pixelated:

Is this just the way Chrome handles these things, or am I missing something? Is there anything that can be done to smoothen it out a bit (short of using an image, obviously)?

Here’s the fiddle: http://jsfiddle.net/wARGc/

---

Update: I filed a bug report for this.

Answer 1

It is a rendering problem by Chrome, you can create the smoothing yourself by adjusting the shape slightly. See my update to your fiddle

http://jsfiddle.net/jamestoone/XU7jB/

div {
    width: 100px;
    height: 100px;
    background: radial-gradient(#000 30%, transparent 30%, transparent 40%, #000 40%, #000 60%, transparent 60%);
}

div.new {
    background: radial-gradient(#000000 30%, transparent 32%, transparent 38%, #000000 40%, #000000 60%, transparent 62%) repeat scroll 0 0 transparent;
    height: 100px;
    width: 100px;
}