Rainbow Text with Animated Effects HTML/CSS Code

if anyone is wondering how I had rainbow text in my bio, then here it is!

If you don't want the moving text moving from left and right, remove the <marquee></marquee> attribute!

<style>

    .rainbow-text {

        background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

        -webkit-background-clip: text;

        color: transparent;

    }

</style>

<marquee><span class="rainbow-text" align="center">Insert your text here</span></marquee>

With Animated Effects

<style>

    .rainbow-text {

        background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);

        text-align: center;

        background-size: 800% 800%;

        -webkit-background-clip: text;

        color: transparent;

        animation: rainbow 8s ease infinite;

    }

    @keyframes rainbow {

        0% {

            background-position: 0% 50%

        }

        50% {

            background-position: 100% 25%

        }

        100% {

            background-position: 0% 50%

        }

    }

</style>

<span class="rainbow-text" align="center">Insert your text here</span>

Credit

https://w3bits.com/rainbow-text/

Feel free to mess around with the coding in

here https://html.onlineviewer.net/