title: see through/invisible white text shadow
body: <p>I have a an html element in the DOM;</p>
  
  <pre><code>&lt;h5 class="white-shadow"&gt; Basic &lt;/h5&gt; 
  </code></pre>
  
  <p>It has the following css rule attached; </p>
  
  <pre><code>.white-shadow{
      text-shadow: -1px 0px 5px #ffffff; 
  }
  </code></pre>
  
  <p>The <code>h5</code> 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. </p>
  
  <p>This is what I see in the browser; </p>
  
  <p><img src="https://i.stack.imgur.com/mPIeD.png" alt="html"></p>
  
  <p>This is what devtools shows me; </p>
  
  <p><img src="https://i.stack.imgur.com/FFtiW.png" alt="devtools"></p>
  
  <p>But if I change the background color from white to red I am able to see the change. </p>
  
  <p>This is what I see in the browser; </p>
  
  <p><img src="https://i.stack.imgur.com/dGe8m.png" alt="enter image description here"></p>
  
  <p>This is what devtools shows me; </p>
  
  <p><img src="https://i.stack.imgur.com/5avqO.png" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p>I am using bootstrap3, although I don't expect that it is blocking white text shadows anywhere. </p>
  
  <p>Why can't I see the white shadow around the text? How could I fix it? </p>