With CSS is there any way to put opacity in the currentColor?

Question

I’m trying to do the box-shadow inherit the shade color in a "dynamic" way, taking the color set in the color through the currentColor. So far so good, only the color is "solid", I’m not being able to give it transparency.

Look at this example. The first div is the expected, but the shade color is very strong, I wanted to lighten it using opacity somehow, but keeping the legacy of currentColor. I’ve tried so many ways the idea would be something like

box-shadow: 0 4px 8px 0 rgba((--cor), .25); or even box-shadow: 0 4px 8px 0 rgba(currentColor, .25);

But none of them work, I didn’t want to have to use a pseudo-element like ::after. And one detail, all the colors of the lib are in hexa, then I can’t change them to rgb():

:root {
    --cor: #ff0000;
}
div {

    width: max-content;
    height: 60px;
    margin: 20px;
    
    color: var(--cor);
    
    border: 2px solid currentColor;
    box-shadow: 0 5px 5px 0 currentColor; 
   
}

div + div {

    --cor: blue;
    /* assim tive que coloca a cor em hardcode para funcionar */
    box-shadow: 0 5px 5px 0 rgba(0,0,255,0.25); 
   
}

<div>sombra usando o currentColor</div>
<div>queria o currentColor com transparencia</div>

Answer 1

This is a response at user’s request @Cmtecardeal

As stated in the commentary, I used the fourth property value box-shadow to find a way... This value is known as spread, and when using a negative value in it the leftover gets "further into" the element, and to correct the fact that the shadow goes further inside I increased the blur, and so I was able to attenuate the sambra well by keeping her color with the currentColor.

For me it was satisfactory, and it was the way I applied it at the end... Read the comment I left in the CSS code

:root {
    --cor: #ff0000;
}
div {

    width: max-content;
    height: 40px;
    margin: 20px;
    padding: 10px;
    
    color: var(--cor);
    
    border: 2px solid currentColor;
    box-shadow: 0 5px 5px 0 currentColor; 
   
}

div + div {

    /* repare nos valores que usei no box-shadow, 
       coloquei um valor de -5px no spread 
       e aumente o valor do blue em 5px */
    box-shadow: 0 5px 10px -5px currentColor; 
   
}

<div>sombra usando o <b>currentColor</b> e sem spread no box-shadow</div>
<div>sombra usando o <b>currentColor</b> e um <b>spread negativo</b> no box-shadow</div>

Answer 2

Css is not Javascript, if you call the function var(--cor) will be returned, only and only the value of the --color property. Then logically no conversion of --cor: #FF0000 for a spread of 255, 0, 0, and what has been stored in currentColor remains #ff0000, unlike javascript where everything is an expression, css is a markup language like HTML.
And unless there is a predefined function to return exactly a pure value, nothing else will occur in marking.
But actually there is already this predefined function in the module color of Sass. And there is also the option to change Runtime with Javascript using cssnext plugin.

Finally the functionality of css-mod, which will serve to convert color values, yet is being written in W3C for use, but not yet adopted by any browser.