How to change alpha of an HSL color if the color comes from a CSS custom property?

Question

I have a list of HSL colors coded as CSS custom properties and I want to manipulate their alpha channel.

What I have tried:

:root {
  --color: hsl(25, 33%, 93%);
}

.test { box-shadow: ... hsla(var(--color), 1); }

In the web browser debugger, checking the styles tab, I observed that the CSS rule is valid as it was not marked as invalid. However, switching to the computed tab and expanding the box-shadow, shows that the computed result is none. So this CSS syntax seems to be correct, but it appears that browsers (Chrome 112 and Firefox 112) are not rendering it.

What can I do to add an alpha channel to HSL colors coded as CSS custom properties?

P.S. There is this messy SASS solution, but I wish not to use it because it requires too much boilerplate.

Answer 1

Yes you can by using hsla and removing the brackets from the variable.

:root {
  --green: 120, 100%, 50%;
}

.box {
  width: 100px;
  height: 100px;
  background: hsla(var(--green), 0.5)
}

<div class="box"></div>