Text shadow opacity

Question

Is it possible to adjust the opacity of just the text shadow, rather than the text itself as well?

E.g I have purple text with a blue shadow. I'd like to make the blue shadow have an opacity without losing anything on the purple.

h1.blue {text-shadow: 3px 3px 0px #3f6ba9;}

Galba

Answer 1

Yes, but specify color in rgba mode to add alpha transparency.

h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency

Chromatograph

Answer 2

To add on the answer for anyone looking to use HEX code instead of RGB:

h1.blue {text-shadow: 3px 3px 0px #3f6ba980;}

The last 2 characters in the above HEX code has opacity set at 50%. For other opacity values, please refer to opacity-hex charts as linked here. Alternatively, if you are using VScode, you will be able to use their in-built color picker to adjust the opacity.

Traverse

Answer 3

If you want to make the shadow more opaque, then you can add multiple repeat shadows. For example, this puts a fairly solid white halo round the text...

text-shadow:  0px 0px 2px white,0px 0px 2px white,0px 0px 2px white;

I use this shadow style to ensure floating black text is legible even when it floats over other black or dark content.

Ligation