JSFiddle - React, Tailwind, and code Playground

by teleject

HTML

<p>Text effects are awesome</p>

CSS

p {font-size: 80px; font-family: verdana, helvetica, trebuchet, sans-serif; font-weight: bold; text-align: center;}

@media screen and (-webkit-min-device-pixel-ratio:0){
p{

    background: 
        -webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
        -webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
        -webkit-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
        -webkit-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
        -webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
        -webkit-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
        -webkit-linear-gradient(left,
        red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%), white;
    -webkit-background-size: 1px 50%, 1px 50px, 32px, 120px, 80px, 70px, 500px;
    
-webkit-background-clip: text,text,text,text,text,text,text,text, border;
color: rgba(0,0,0,0);
    }
}