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 defin­ing col­our called transparent. Unfortunately that keyword is a little more com­plic­ated 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 chan­nel is at zero opa­city, isn’t that trans­par­ent?

Unfortunately it’s not that simple.

Another way to accur­ately describe it would be trans­par­ent black. Why does this mat­ter? Well let’s say that you wanted to fade out the opa­city of a light col­or, per­haps using a CSS gradi­ent. Due to transparent actu­ally being black with zero opa­city the light col­or won’t simply fade out, it will darken out (excuse my lack of a bet­ter term). As the gradi­ent approaches transparent it will also approach pure black.

A pic­ture is a thou­sand words, and hope­fully this test case is more illus­trat­ive again.

For more inform­a­tion have a look at this art­icle:

Tweet this