Pure CSS Rainbow Text Animation

The colours of the rainbow are Red, Orange, Yellow, Green, Blue, Indigo(*colour between blue and purple) and Violet.

I will use exactly these colours to create the rainbow text and the animation.

Demo:

*to see the code output on the website click here.

To create the CSS Rainbow Text Effect and the Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="rainbowText">RAINBOW TEXT</div>

Step2.

Add CSS

Set the colour and position of the background and the elements:

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

Style your text.

Create the linear-gradient with 7 colours of the rainbow:

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;

Step3.

Add CSS Animation

@keyframes move {
	to {
		background-position: 4500vh;
	}
}

To see the live output of the animation go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Share this: