user profile image

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 stop-color and stop-opacity independently.


  1. Can someone comment describing the appearance of this demo in Safari?

    All the browsers I tested on Windows (Chrome, Firefox, Edge) draw the 2nd & 3rd gradients identically. However, the screenshot generated by CodePen (I assume using PhantomJS, which uses WebKit) draws the 3rd gradient completely opaque, from lime to black. In other words, it completely ignores the alpha channel when stop-color uses rgba colors.

  2. Comparison:

    Screenshot of Chrome (I think), which looks the same as Firefox & Edge:

    4 gradients, top and bottom transition evenly from lime to transparent on white, 2nd and 3rd also transition from lime to white but via a dark gray

    CodePen's static screenshot:

    Also 4 gradients, the first and second look the same, the 3rd transitions from lime to opaque black, and the 4th has the same fade-to-gray effect as the 2nd

    Also note that this screenshot doesn't use pre-multiplied colors for the CSS gradient, so you get the fade-to-gray effect.

  3. @AmeliaBR Safari gives the same result as the CodePen screenshot. Third gradient is opaque lime to black.

  4. @meowwwls

    Thanks for the confirmation. So the general rule for now should be: don't use semi-transparent colors in SVG gradient stop-color!

    From my perspective as a spec editor, this is actually a good thing: since existing implementations don't agree, we aren't forced to write the spec to match existing implementations, and can instead define it to be the most useful option (i.e., to match the latest CSS gradient specs).

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.