tl;dr for this post: at least in Chrome transparent as a CSS color translates to rgba(0,0,0,0), which means that if you have a gradient from something that isn'

tl;dr for this post: at least in Chrome transparent as a CSS color translates to rgba(0,0,0,0), which means that if you have a gradient from something that isn't fully transparent (alpha channel > 0) to transparent, there will be an awkward phase in the middle where black is visible (because the gradient is transition the alpha channel in lockstep with the color.)