HTML/CSS: "transparent" is not a color

Heads up: transparent is not a real color, but black with 0% opacity.

In Safari, this makes e.g. gradients between transparent and white have some gray tones in the middle.

/* Unexpected in Safari */
linear-gradient(to right, white 0%, transparent 100%)

/* Correct */
linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%)
Dominik Schöler About 4 years ago