<style>
    span::selection { color: purple; }
    div.roundedRect {
        width: 100px;
        height: 100px;
        margin: 50px;
        -webkit-border-radius: 25px;
        -webkit-box-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
                          , hsla(60, 100%, 50%, 1) -8px 14px 2px
                          , hsla(100, 100%, 50%, 1) -21px -12px 5px;
     }
</style>
<div style="
    font-family: Lucida Grande;
    font-weight: bold;
    font-size: 48px;
    margin: 20px;
    text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
               , hsla(60, 100%, 50%, 1) -8px 14px 2px
               , hsla(100, 100%, 50%, 1) -21px -12px 5px;
">
    <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
    <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
    <span style="color: rgba(0, 0, 0, 0.3);">casts</span>
    <span id="selectMe">multiple</span>
    shadows
</div>
<script>
    var text = document.getElementById("selectMe").firstChild;
    getSelection().setBaseAndExtent(text, 0, text, 6);
</script>
<div class="roundedRect"></div>
<div class="roundedRect" style="background-color: white;"></div>
<div class="roundedRect" style="background-color: rgba(0, 0, 0, 0.2);"></div>