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%)
Profile picture of Dominik Schöler
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)