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?