CSS gradients have special rules to create more aesthetically pleasing results when transitioning to transparent colors. This gives the intuitive result when transitioning from a color to
transparent (which is officially equal to transparent black).
In contrast, SVG gradients were initially defined with color and opacity transitioned independently. To create a result similar to CSS, you need to explicitly repeat the
stop-color value, while changing the
stop-opacity value. If you transition
stop-color from color to black, that transition is applied completely separately from any transition in opacity. Which makes sense, and isn't that hard to avoid if it's not what you want.
However, today you can also use
rgba() colors and the
transparent keyword in your SVG gradients
stop-color value. I would expect to then get the same results as a CSS gradient with the same colors, but that is not specified anyware and doesn't seem to be how any browser currently implements it.
I've filed an SVG spec issue suggesting that we change the behavior of semi-transparent stop-color gradients to match CSS. If you want the transition to black effect, you could still get it by transitioning