Highlights and shadows: the color of transparent in CSS3

The pro-tip <a href="http://coderwall.com/p/tpmsta?p=1&q=">**'CSS's "transparent" may not be transparent, especially on diagonal borders'*</a> from Chris Morgan reminds me of the time I was faced with the color of transparent in CSS.
I was doing highlights on the background of an element by using a radial-gradient as a background-image. To make the original color shine through I started with half transparent white (in rgba) and ended the gradient with *transparent. I was wrong:

background-image: radial-gradient(50% 0,ellipse farthest-side, 
    rgba(255,255,255,.5), transparent 100%);

<div> Hey, where is my div</div><div style="clear:both"></div>
The color of transparent is black.
Highlight from 'white' --rgba(255,255,255,.5)-- to 'transparent'

The true color of transparent is revealed here. It is black. The gradient goes from opacity 0.5 to 0. But that's not all. The gradient also changes color from white to black, using all shades of gray in between.

It seems so obvious to me now, but I was really puzzled at the time. Why did my code gave me this result? Upon trying other colors it soon started to make sense. I tried transparent white.

background-image: radial-gradient(50% 0,ellipse farthest-side, 
    rgba(255,255,255,.5), rgba(255,255,255,0) 100%);

<div style="background-color:#0ee;background-image:-webkit-radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 100%);background-image:-moz-radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 100%);background-image:radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(255,255,255,0) 100%);height:200px;margin:0 auto;width:200px;"></div>
Highlight from white 'rgba(255,255,255,.5)' to transparent-white 'rgba(255,255,255,0)'

It looks nice at first sight but upon close inspection this method results in ugly borders, too sharp for a highlight effect, sometimes looking more like a sphere than a highlight. This effect is easier to recognise on a darker background (illustrated on the right).

The only real safe way to go is to stick with the mantra:

KEEP YOUR COLOR

"when casting shadows or highlights using css-gradients", is what a little voice inside my head always echoes afterwards. The use case is rare, but a potential time saver for every developer.

Keep your color by starting a gradient with white for highlights or black for shadows. End the gradient with a transparent color-stop in rgba having the color of the background.

background-image: radial-gradient(50% 0,ellipse farthest-side, rgba(255,255,255,.5), 
    rgba(0,136,136,0) 100%);

<div style="background-color:#0ee;background-image:-webkit-radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(0,238,238,0) 100%);background-image:-moz-radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(0,238,238,0) 100%);background-image:radial-gradient(50% 50%,ellipse farthest-side, rgba(255,255,255,.5), rgba(0,238,238,0) 100%);height:200px;margin:0 auto;width:200px;"></div>
Highlight from white 'rgba(255,255,255,.5)' to transparent-color 'rgba(0,136,136,0)' having the same color as background

The difference between white or colored transparent is slight. Also inspect the effect on a darker background (on the right). Knowing what results to expect is the big win here. And when creating highlights or casting shadows with a css gradient, you now know that by coloring your transparent color you are always on the safe side.
Update: I should note here, that the transparent-white is more usable for highlighting backgrounds having textures or images.

To prevent yourself from being surprised by the color transparent, just remember one thing: