Rainbow text animation using only CSS

Question

I got inspired by this Rainbow Text Animation rainbow-text-animation, and I would like to use only CSS to make this happen instead of all that complicated SCSS coding.

I got what I like so far and now I just want to make it go from left to right AND having multiple colors in one entire line instead of one color at a time.

Run the code snippet to see what I'm talking about.

So as you can see, I want as many colors I want in one line and not one color in the entire line (one at a time).

#shadowBox {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.2);
  /* Black w/opacity/see-through */
  border: 3px solid;
}

.rainbow {
  text-align: center;
  text-decoration: underline;
  font-size: 32px;
  font-family: monospace;
  letter-spacing: 5px;
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}

<div id="shadowBox">

  <h3 class="rainbow">COMING SOON</h3>

</div>

score 27 · Accepted Answer · edited Feb 15 '19 at 09:09

27

You can achieve this effect by using a moving gradient background, color to transparent, and background clip to text.

#shadowBox {
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.2);
    /* Black w/opacity/see-through */
    border: 3px solid;
}

.rainbow {
    text-align: center;
    text-decoration: underline;
    font-size: 32px;
    font-family: monospace;
    letter-spacing: 5px;
}
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

<div id="shadowBox">
    <h3 class="rainbow rainbow_text_animated">COMING SOON</h3>
</div>

edited Feb 15 '19 at 09:09

Temani Afif

245,468
26
309
415

answered Feb 15 '19 at 03:26

Austen Holland

1,828
1
15
24

Sweet that worked, so now how can I change this to go from left to right instead of right to left and change the speed? – Azazel Feb 15 '19 at 03:31
2

You can freely change the speed by adjusting the duration of the `.rainbow_text_animated` animation. (Say changing `6s` to `12s` to double the slowness) At the moment it is moving the gradient background to the right, then to the left, then back to the right etc. This creates the "loop" effect. – Austen Holland Feb 15 '19 at 03:35
Oh sweet man! Thanks for the clarification! And thanks for your help! Just what I needed to make my life much more simpler. SCSS is still out of my league. I got the book to learn Responsive Design using SASS but I rather start by learning media queries to make understanding responsive design a lot easier before advancing. – Azazel Feb 15 '19 at 03:40
Tip: Put speed at 1s for a cooler effect! – Halo Oct 27 '21 at 21:01

score 2 · Answer 2 · answered Dec 08 '20 at 19:15

2

#shadowBox {
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.2);
  /* Black w/opacity/see-through */
  border: 3px solid;
}

.rainbow {
  text-align: center;
  text-decoration: underline;
  font-size: 32px;
  font-family: monospace;
  letter-spacing: 5px;
  animation: colorRotate .5s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}

<div id="shadowBox">

  <h3 class="rainbow">VERB</h3>

</div>

answered Dec 08 '20 at 19:15

Scott Wright

21
1

3

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Dec 08 '20 at 19:55
1

This does not solve the OP's question. The OP is asking how to have multiple colours present at the same time, not cycling through the colours one at a time. – Austen Holland Dec 16 '20 at 23:38

Rainbow text animation using only CSS

2 Answers2