HTML/CSS: "transparent" is not a color

Updated . Posted . Visible to the public. Deprecated.

This has been fixed in all browser we support.

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

In transparent gradients, this adds some gray shades:

/* ❌ Looks dull in older browsers */
linear-gradient(to right, white 0%, transparent 100%)

Browser vendors have soon found a fix Show archive.org snapshot , but Safari only implemented it in 15.4. Should you need to support older versions, here is how:

/* ✅ Fix for older browsers: transparent white */
linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%)
Dominik Schöler
Last edit
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2020-03-25 09:48)