JSFiddle - React, Tailwind, and code Playground

HTML

<div class="covered">
    <div class="cover"></div>
    this is some text.
    a lot of text
</div>

CSS

.cover {
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, white 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, white 100%);
    position: absolute;
    width: 100%;
    height: 100%;
}
.covered {
    position: relative;
    font-size: 300%;
    display: inline-block;
}