Why CSS and SVG gradients do not match?

Question

Gradient results should not be the same? Why are they so different ... Am I missing something?

DEMOSTRACTION

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%); 

Answer 1

CSS gradient runs from center to side . SVG gradient runs from center to corner . Thus, the radius of the SVG gradient is 1.414 (√2) times larger than the radius of the CSS gradient.

I did not find a way to make the SVG gradient the size from the side instead of the corner. Therefore, to combine CSS gradient stop with 50%, I calculated SVG gradient stop manually:

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

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

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

... In Google Chrome, there is still a slight difference (presumably no dithering ) in how the gradients are displayed. In Firefox and Safari, both gradients look smooth.

Answer 2

When you define the radius of the radial gradient as “100%,” that means 100% in units of the BoundingBox:% of the square root of the sum of the squares of the height and width of your bounding box . Gradient stops are defined relative to this size.