CSS alpha() playground

Change only a color’s opacity with alpha(). Set a new alpha or multiply the original with calc(alpha * …), preserving its components and color space.

Original

Result with alpha()

HTML

<div class="alpha-demo"></div>

CSS

.alpha-demo {
  --origin-color: oklch(65% 0.2 260 / 0.8);
  background-color: alpha(from var(--origin-color) / 50%);
  inline-size: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
}