Rainbow text (including animation)

[Credit] - check this out for more detail!

How to use each property:

<p class="rainbowUnderline inline">This is the Rainbow Underline</p>
<p class="rainbow inline">This is the Rainbow Text</p>
<p class="rainbowPan inline">This is the Rainbow Pan</p>
<p class="rainbowFlash inline">This is the Rainbow Flash</p>
<p class="rainbowFlashShadow inline">This is the Rainbow Flash Shadow</p>
<p class="rainbowBlink inline">This is the Rainbow Blink</p>
<p class="rainbowBlinkPan inline">This is the Rainbow Blink Pan</p>




CSS:

Rainbow underline:

<style>

.rainbowUnderline{text-decoration:none;background-position:0 1.10em;background-size:100% 100%;background-repeat:no-repeat;transition:background 0.5s;background-image:linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959)}

</style>

Rainbow text:

<style>

.rainbow{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

</style>

Rainbow Pan:

<style>

.rainbowPan{animation:myRainbowPan 1s infinite}

</style>

Rainbow Flash:

<style>

.rainbowFlash{animation:myRainbow 2s linear infinite}

</style>

Rainbow flash Shadow:

<style>

.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}

</style>

Rainbow Blink:

<style>

.rainbowBlink{animation:myRainbowBlink 0.3s infinite}

</style>

Necessary CSS (For the animations):