28

It's easy to create a rainbow in CSS using linear-gradient.

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}
<div id="grad1"></div>

But look at it! This gradient is aesthetically horrifying. It's streaky, there's ugly strips of pure colour where the endpoints meet, it doesn't loop very well, it's not smooth, and the colours clearly contrast against each other when they should seamlessly blend.

In short: it's a terrible gradient.

I'd like to find the perfect gradient. One that encompasses the rainbow in a slick, smooth way, one that doesn't leave any obvious bumps or visual tearing. Instead of a spiky mess, this gradient is a smooth curve.

Does this gradient exist?

1
  • 1
    do you have an image of what you consider to be a perfect rainbow gradient? Commented Jun 2, 2019 at 20:44

7 Answers 7

43

You need to choose colors that will blend nicely together and more color steps.

background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

.rainbow-box {
    width: 80vw;
    height: 200px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}
<div class="rainbow-box"></div>

CSS gradient with a number of color steps, by each 10%

Screenshot of CSS rainbow gradient after rendering in the browser

I made it using CSS gradient generator: https://cssgradient.io/

0
10

You can do it easily like below thanks to the new color interpolation. We tell the browser to take the longer route between red and red in the hue color space.

#grad1 {
  height: 200px;
  background: linear-gradient(in hsl longer hue 45deg, red 0 0);
}
<div id="grad1"></div>

rainbow gradient using CSS

3
  • It'll be interesting to see what this looks like, when a browser eventually supports it. (tested Firefox Nightly 113.0a1) Commented Apr 4, 2023 at 8:52
  • 1
    @snazzybouche you can consider the last Chrome version with Dev flag enabled. I have added a screenshot as well Commented Apr 4, 2023 at 9:23
  • FYI, this feature is now available since Chrome v111 and Safari 16.2 (not FF though 😢): caniuse.com/…
    – std4453
    Commented Nov 6, 2023 at 7:12
8

"Rainbow" or "Color wheel" is often referred to as Hue.
CSS has the hsl() function (stands for Hue, Saturation, Lightness).
To create the gradients, simply divide the 360 hue degrees by 12 main colors (= 30 deg. steps).
Apply increments on the Hue by 30 degrees:

#hue {
  height: 40px;
  background: linear-gradient(90deg,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}
<div id="hue"></div>

4

You can get something that looks better by overlaying the individual red, green, and blue colours, trying to match the human colour cone sensitivities.

Here's an example, but it could be improved by adjusting some of the % numbers in the linear-gradients, and by having smother gradient shapes (currently triangles with cut-off tops).

Rainbow with RGB components.

<!DOCTYPE html>
<html>
<head>
    <title>Rainbow</title>
    <meta charset="UTF-8" />
    <style>
        * { box-sizing: border-box; }

        .separate   { width: 100%; height: 10em; }
        .separate>* { width: 100%; height: 100%; margin-top: 1em; }

        .overlay   { width: 100%; height: 10em; filter: brightness(3); }
        .overlay>* { width: 100%; height: 100%; position: absolute; }
        .overlay>:nth-of-type(1) { opacity: 1; }
        .overlay>:nth-of-type(2) { opacity: .5; }
        .overlay>:nth-of-type(3) { opacity: .33; }
        .overlay>:nth-of-type(4) { opacity: .25; }

        .blue   { background: linear-gradient(
           90deg,                 rgb(0,0,256)  0%, rgb(0,0,256) 5%,  rgb(0,0,0) 20% ); }
        .green  { background: linear-gradient(
           90deg, rgb(0,0,0) 0%,  rgb(0,256,0) 25%, rgb(0,256,0) 35%, rgb(0,0,0) 55% ); }
        .red    { background: linear-gradient(
           90deg, rgb(0,0,0) 15%, rgb(256,0,0) 35%, rgb(256,0,0) 45%, rgb(0,0,0) 100% ); }
        .blue2  { background: linear-gradient(
           90deg, rgb(0,0,0) 65%, rgb(0,0,256) 95%, rgb(0,0,256) 100% ); }
    </style>
</head>
<body>
<h1>Rainbow</h1>
    <div class="overlay">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
    <div class="separate">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
</body>
</html>
2

To add to Roko's excellent answer, you can adjust the lightness of each color to achieve something close to equal perceptual brightness, as follows (don't mind the javascript, that's just there to cycle the --lightness css variable):

let hue = document.getElementById("hue");
let btn = document.getElementById("btn");
let fade;

setTimeout(() => {
  btn.style.visibility = "visible";
  setFade();
},4000);

btn.addEventListener("click",() => {
  if (fade) {
    clearInterval(fade);
    fade = false;
    hue.style.setProperty('--lightness','50%');
    btn.innerHTML = "Start";
  } else {
    btn.innerHTML = "Stop";
    setFade();
  }
});

function setFade() {
  let i=31;
  fade = setInterval(() => {
    hue.style.setProperty('--lightness', `${(Math.sin(i/80)/3+0.667)*63}%`);
    i++;
  },50);
}
#hue {
  height: 40px;
  
  --lightness: 50%;
  
  background: linear-gradient(90deg,  
    hsl(0, 100%, calc(var(--lightness) * 1.26)),
    hsl(30, 100%, calc(var(--lightness) * .96)),
    hsl(60, 100%, calc(var(--lightness) * .74)),
    hsl(90, 100%, calc(var(--lightness) * .68)),
    hsl(120, 100%, calc(var(--lightness) * .70)),
    hsl(150, 100%, calc(var(--lightness) * .70)),
    hsl(180, 100%, calc(var(--lightness) * .66)),
    hsl(210, 100%, calc(var(--lightness) * 1.20)),
    hsl(240, 100%, calc(var(--lightness) * 1.38)),
    hsl(270, 100%, calc(var(--lightness) * 1.26)),
    hsl(300, 100%, calc(var(--lightness) * 0.86)),
    hsl(330, 100%, calc(var(--lightness) * 1.18)),
    hsl(360, 100%, calc(var(--lightness) * 1.26))
  );

}

#btn {
  margin-top: 1em;
  visibility: hidden;
}
<div id="hue"></div>
<button id="btn">Stop</button>

Adjust values to taste. I also tried it with 24 stops, and tweaked some of the hue and saturation values too. I guess it's a little smoother:

#hue {
  height: 40px;
  
  --lightness: 50%;
  
  background: linear-gradient(90deg,  
    hsl(0, 100%, calc(var(--lightness) * 1.30)),
    hsl(15, 100%, calc(var(--lightness) * 1.10)),
    hsl(35, 100%, calc(var(--lightness) * 1.02)),
    hsl(48, 100%, calc(var(--lightness) * 0.90)),
    hsl(60, 100%, calc(var(--lightness) * .76)),
    hsl(72, 100%, calc(var(--lightness) * .71)),
    hsl(90, 100%, calc(var(--lightness) * .70)),
    hsl(105, 100%, calc(var(--lightness) * .70)),
    hsl(120, 100%, calc(var(--lightness) * .695)),
    hsl(135, 100%, calc(var(--lightness) * .70)),
    hsl(150, 100%, calc(var(--lightness) * .70)),
    hsl(165, 100%, calc(var(--lightness) * .69)),
    hsl(180, 100%, calc(var(--lightness) * .65)),
    hsl(195, 80%, calc(var(--lightness) * .85)),
    hsl(215, 75%, calc(var(--lightness) * 1.25)),
    hsl(225, 100%, calc(var(--lightness) * 1.40)),
    hsl(240, 100%, calc(var(--lightness) * 1.48)),
    hsl(255, 100%, calc(var(--lightness) * 1.44)),
    hsl(270, 100%, calc(var(--lightness) * 1.35)),
    hsl(285, 100%, calc(var(--lightness) * 1.15)),
    hsl(300, 90%, calc(var(--lightness) * .89)),
    hsl(315, 80%, calc(var(--lightness) * .98)),
    hsl(330, 90%, calc(var(--lightness) * 1.12)),
    hsl(345, 95%, calc(var(--lightness) * 1.21)),
    hsl(360, 100%, calc(var(--lightness) * 1.30))
  );

}
<div id="hue"></div>

1

I’m not a CSS programmer, but just using the linear gradient fill in MS Word/Excel/PowerPoint, I like to create my rainbow with just the following 4 RGB colors: (255,0,0) ; (255,255,0) ; (0,192,255) ; (192,0,255). That looks pretty good to me, and with very little effort! {See Images >>}

enter image description here

enter image description here enter image description here

Another variation of the rainbow above is “Sunset over the Ocean”. (It will make a great background for a webpage). Start with the rainbow, replace the last (purple) color with the following dark blue one: (60,70,200). Then move the yellow slider right up against the light blue one (mine is at 60% and 61%). And that’s it! {See Image >>}

enter image description here

I managed to do it in CSS! :-) >>

.Rainbow-4Color-Mix 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 33%,
   rgba(0, 192, 255, 1) 66%,
   rgba(192, 0, 255, 1) 100%);
}

.Gap {width:200px; height:50px; background-color:white;}

.Ocean-Sunset 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 60%,
   rgba(0, 192, 255, 1) 61%,
   rgba(60, 70, 200, 1) 100%);
}
<div class="Rainbow-4Color-Mix"></div>
<div class="Gap"></div>
<div class="Ocean-Sunset"></div>

-2

Just an idea: Instead of explicitly specifying all of the colors in the rainbow, you could just specify red, yellow, and blue. The colors should then just blend naturally.

Another idea: If you don't like these particular shades of yellow, red, and blue, you could try custom ones with RGB values. The basic idea is the same though with only using the three primary colors in the rainbow.

EDIT: You can add violet back in by adding red at the end.

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, yellow, blue, red);
}
<div id="grad1"></div>

3
  • 5
    I don't see green and violet Commented Jun 2, 2019 at 20:47
  • 2
    ...and cyan, pink, etc Commented Dec 2, 2022 at 23:07
  • i really don't see green... this looks weird Commented Jun 1 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.