Search code examples
csssvgradial-gradients

Why CSS and SVG radial gradients do not match?

The outcome of the gradients should not be the same? Why are they so different... Am I missing something?

DEMOSTRATION

SVG

<radialGradient cx="50%" cy="50%" r="100%" spreadMethod="pad" id="radGrad">
  <stop offset="0" stop-color="#fff"/>
  <stop offset="0.5" stop-color="#00f"/>
</radialGradient>

CSS

background: radial-gradient(ellipse at center, #fff 0%,#00f 50%);
Solution

  • The CSS gradient runs from the center to the side. The SVG gradient runs from the center to the corner. So the SVG gradient radius is 1.414 (√2) times larger than the the CSS gradient radius.

    I haven't found a way to make the SVG gradient be sized from the side instead of the corner. So to match the CSS gradient stop at 50%, I calculated the SVG gradient stop manually:

    (CSS gradient radius / SVG gradient radius / 2) or (1 / 1.414 / 2).

    That means: <stop offset="0.3536" stop-color="#00f"/>

    http://codepen.io/anon/pen/emLqy/


    … In Google Chrome, there's still a small difference (presumably no dithering) in how the gradients are rendered. In Firefox and Safari both gradients look smooth.