see through/invisible white text shadow - html

Question

I have a an html element in the DOM;
<h5 class="white-shadow"> Basic </h5>
It has the following css rule attached;
.white-shadow{
text-shadow: -1px 0px 5px #ffffff;
}
The h5 is within a list element that has a gray background. The idea is to add the white text shadow for better readability. The odd thing is that I see no results.
This is what I see in the browser;
This is what devtools shows me;
But if I change the background color from white to red I am able to see the change.
This is what I see in the browser;
This is what devtools shows me;
I haven't touched the alpha parameter of the text shadow rule. For some reason the red text shadow color is visible while the white text color is not.
I am using bootstrap3, although I don't expect that it is blocking white text shadows anywhere.
Why can't I see the white shadow around the text? How could I fix it?

Answer 1

Shadow is there in the DOM but because of your background-color, it is not much noticeable
see here
My suggestion, either change shadow color or background-color
here is what you want
use
.white-shadow{
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
text-shadow value quoted from thread : Text border using css (border around text)