JSFiddle - React, Tailwind, and code Playground
HTML
<p>IE 10 Whyyyyy?</p>
<p class="blur">blurrrrrrrrrrrrrrrrrrr?</p>
<p class="hsla">how about hsla?</p>
<p class="opacity">what about with regular opacity?</p>
<p class="spread">works when theres a spread... hmm</p>
CSS
body {
background-color: #eee;
color: #666;
font-size: 48px;
text-shadow: 1px 1px 10px red;
}
.blur {
text-shadow: 0 0 10px red;
}
.hsla {
text-shadow: 5px 5px 0 hsla(120,50%,50%,.2);
}
.opacity {
opacity: .2;
}
.spread {
text-shadow: 5px 5px 0 5px rgba(0,0,0,.2);
}
JavaScript
// basic text shadow test ... ie 10 you are blowing it
// alpha channel fails without blur... dafuq?