Text Shadow with CSS Variable

Question

I have a problem with the text shadow property.

This works:

text-shadow: 1px 1px 0 var(--primary-color);

This doesn't work:

text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

Does anyone know what the problem is?

Thank you!

Answer 1

--primary-color: #f00;
text-shadow: 1px 1px 0 var(--primary-color);
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

evaluates to

text-shadow: 1px 1px 0 #f00;
text-shadow: 1px 1px 0 rgba(#f00, 0.5);

rgba(#f00, 0.5) is not a valid rgba color.

Instead you could do:

:root {
  --primary-color: 255, 0, 0;
}

.opaque {
  text-shadow: 1px 1px 0 rgb(var(--primary-color));
}

.translucent {
  text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
}

<div class="opaque">Opaque</div>
<div class="translucent">Translucent</div>