JSFiddle - React, Tailwind, and code Playground

by Michael Fuller

HTML

<html>
<span id="gradient">
  Hello
</span>
</html>

CSS

#gradient
{
    /*
    height:300px;
    width:300px;
    */
    border:0;
    border-radius: 5px;
    font-size:30px;
    background: linear-gradient(270deg, #eee, #aaa, #eee, #aaa, #eee, #aaa, #eee, #aaa, #eee);
    background-size: 200% 20%, 200%;

    -webkit-animation: Animation 5s linear infinite;
    -moz-animation: Animation 5s linear infinite;
    animation: Animation 5s linear infinite;
}

/*
@-webkit-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}
*/
@keyframes Animation { 
    0%{background-position:0% 0%}
    50%{background-position:100% 0%}
    100%{background-position:200% 0%}
}