How to create a rainbow loop background with CSS - Beginner Friendly

Michelle Tamar — Mon, 24 Oct 2022 20:35:56 +0000

In 2013 Tumblr (simpler times), if you had a rainbow background on your theme, you were IT! All the popular Tumblrs had it. It was a thing.

I remember trying to figure out how to create this magical background, asking others on Tumblr, but everyone would keep this information a top secret. I thought you needed to be an advanced wizard coder to create it. Turns out, it's super duper easy. You only need CSS and a few lines of code!

🌈 It's Rainbow Time 🌈

Open up your style sheet and start typing:

body {
  background-color: #f3bbff;
  animation: bgColor 50s infinite linear;
  margin: 0px;
}

You can choose any background color you like. I chose pink because it's the best color, obviously. You can also set the margin to whatever you want.

But... wait a minute...

🤔 Animations? 🤔

CSS Animations are the process of animating the objects (or elements) on a web page. We have three major categories to perform animations:

Transformation — Transforming the dimensions, rescaling the objects, moving them from point A to B, etc.

Transitions — Performing the transformations smoothly.

Keyframes — Changing the animation (property, value, etc.) at a given time or state.

For a rainbow background, we will be using Keyframes, as we need the background color to change to another after a set amount of time. It's super easy, trust me. But more on that in a second.

Breaking down what we just wrote:

bgColor: what we name our animation, for clean code and ease of understanding.
50s: we set the time duration we want for each color.
infinite: this makes the color transition loop indefinitely, creating that "rainbow effect".
linear: this makes the color transition smooth, so the colors "fade" into each other.

Now, back to...

🔑 Keyframes 🖼️

The keyframes, are, well, the key frames of our animation. They allow us to build and define multicomponent, multi-state animations - from A to B to C to D to E and so forth. When we use keyframes, we can control the timing of the animation: when it starts, how many times it should repeat, and how long it should last.

To be very technical:
Keyframes start with an offset of 0% and end with an offset of 100%. The % is a percentage of the time through the animation sequence at which the specified keyframe should occur.

Keyframes let us build complex animations, but really, they're not complex at all.

Let's define our keyframes for our beautiful rainbow loop background:

@keyframes bgColor {
  10% {
    background-color: #a43535;
  }
  20% {
    background-color: #ff7b00;
  }
  30% {
    background-color: #ffff51;
  }
  40% {
    background-color: #a7ff4e;
  }
  50% {
    background-color: #7addfe;
  }
  60% {
    background-color: #6b6bfd;
  }
  70% {
    background-color: #ca61ff;
  }
  80% {
    background-color: #ff54af;
  }
  90% {
    background-color: #f3bbff;
  }
}

Keyframes span from a range of 100%, and you can split it up into as many pieces as you'd like within that 100%. So choose your colors, assign them into however many percentages you need (10% per color is easy - you can also do 25%, or 5%, or 1% if you're brave...) and voila!

Literally, that's it. You're done. Coding queen/king come through!

🥳

Check out the result on Codepen.

DEV Community: Michelle Tamar

How to create a rainbow loop background with CSS - Beginner Friendly

🌈 It's Rainbow Time 🌈

🤔 Animations? 🤔

🔑 Keyframes 🖼️

🥳