La palabra clave transparent existe desde CSS2. Su utilidad era sobrescribir un color o fondo que se hubiera definido previamente para algún elemento. Antes de CSS3 y RGBA, solo teníamos la opción de definir colores sólidos o, transparente.
En CSS3 la definición ha cambiado y hay que tener cuidado con el uso de transparent en combinación con otras propiedades.
Normalmente usamos propiedades o palabras clave sin conocer a fondo su funcionamiento. Está bien, es una de las ventajas de trabajar en Web. Podemos probar muchas cosas sin necesidad de sabernos los estándares.
Precisamente eso me sucedió con transparent, no me había detenido a pensar en su significado. Tal vez lo había inferido de como se usaba en CSS2: Transparent = sin color.
Resulta que en CSS3 transparent es equivalente a un color RGBA: Transparent = rgba(0,0,0,0) = negro transparente.
Normalmente esto no tiene ninguna implicación, pero al combinarla con otras propiedades, por ejemplo gradientes, puede haber problemas.
El problema con los gradientes se presentaba anteriormente en algunos navegadores (Firefox anterior a la versión 36), pues la interpolación de los colores no se hacía usando colores premultiplicados (más información técnica al respecto).
Usando Firefox 35 o anteriores, podemos ver este problema: Al querer hacer un gradiente que vaya de transparente a azul solido, usando transparent, estaríamos pasando por una zona gris. Para lograr el gradiente deseado deberíamos usar rgba(0,0,255,0) en lugar de transparent. En la imagen a continuación, se puede ver la diferencia entre usar transparent (arriba), y usar rgba(0,0,255,0) (abajo):
En conclusión, es mejor no usar transparent, para evitar problemas (aunque el problema con los gradientes quedó solucionado en Firefox 36). Si lo usamos, debemos ser conscientes que solo es un alias de rgba(0,0,0,0).