Estou tentado fazer o box-shadow
herdar a cor da sombra de forma "dinâmica", pegando a cor setada no color
através do currentColor
. Até ai tudo bem, só que a cor é "sólida", não estou conseguindo dar transparência nela.
Repare nesse exemplo. A primeira div é o esperado, mas a cor da sombre fica muito forte, queria dar uma atenuada nela usando opacity
de alguma forma, mas mantendo a herança do currentColor
. Já tentei de vária formas a ideia seria algo como
box-shadow: 0 4px 8px 0 rgba((--cor), .25);
ou até box-shadow: 0 4px 8px 0 rgba(currentColor, .25);
Mas nenhuma delas funciona, não queria ter que usar um pseudo-elemento como ::after
. E um detalhe, todas as cores da lib estão em hexa
, então não posso muda-las para 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>