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></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?
14 Answers
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></div>I made it using CSS gradient generator:
1You 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).
<!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> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> </div>
</body>
</html>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></div>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 >>}
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 >>}
