How to apply transparency to any color with pure CSS

The apply transparency to an element, you can use opacity in CSS. However, sometimes you don't want to make the entire element transparent.
Using not-so-modern CSS, you can simply generate non-opaque versions of a color. This card describes how to do that.

How to generate a transparent color variant

CSS' color-mix function is all you need.

Copy--color: #f00
--transparent-color: color-mix(in srgb, var(--color), transparent 75%)

You can also use currentColor.

Copy--transparent-color: color-mix(in srgb, currentColor, transparent 75%)

Note that we're mixing in the sRGB color space. This should be perfectly fine for transparency, but any other color space (like in hsl) should be fine as well.

Example usage

Copy.demo {
  --transparent-color: color-mix(in srgb, currentColor, transparent 75%);
  background: var(--transparent-color);
}

Codepen demo: https://codepen.io/foobear/pen/raaLggr Show archive.org snapshot

Browser support

• Chrome/Edge 111+
• Firefox 113+
• Safari 16.2+

https://caniuse.com/mdn-css_types_color_color-mix Show archive.org snapshot