The Value ‘Transparent’ Isn’t as Transparent as You Might Think

The Value ‘Transparent’ Isn't as Transparent as You Might Think

This post will take less than a minute to read.

CSS has a keyword value for use when defining colour called transparent. Unfortunately that keyword is a little more complicated than it first might appear. Basically, transparent is equal to hsla(0,0%,0%,0) or rgba(0,0,0,0). What could be wrong with that? The alpha channel is at zero opacity, isn’t that transparent?

Unfortunately it’s not that simple.

Another way to accurately describe it would be transparent black. Why does this matter? Well let’s say that you wanted to fade out the opacity of a light color, perhaps using a CSS gradient. Due to transparent actually being black with zero opacity the light color won’t simply fade out, it will darken out (excuse my lack of a better term). As the gradient approaches transparent it will also approach pure black.

A picture is a thousand words, and hopefully this test case is more illustrative again.

For more information have a look at this article: http://www.w3.org/TR/css3-color/#transparent

Tweet this