JSFiddle - React, Tailwind, and code Playground

HTML

<span class="overlay">This string ends with an gradient to the background color overlayed</span>

<br /><br />

<div class="pattern">
<div class="mask">This string is masked to the right</div>
</div>
<div STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>

CSS

body {
    padding:10px;
}
span {
    font-weight:bold;
    white-space:nowrap;
    position:relative;    
}

div.mask {
    font-weight:bold;
    white-space:nowrap;
    position:relative;    
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}