Linjär övertoning med färgsteg (linear-gradient)

Box 1

#box1 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00),
rgba(255,153,0,1.00),
rgba(255,255,0,1.00),
rgba(0,255,0,1.00),
rgba(0,51,255,1.00));
}

Box 2

#box2 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,153,0,1.00) 25%,
rgba(255,255,0,1.00) 50%,
rgba(0,255,0,1.00) 75%,
rgba(0,51,255,1.00) 100%);
}

Box 3

#box3 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,0,0,1.00) 20%,
rgba(255,153,0,1.00) 20%,
rgba(255,153,0,1.00) 40%,
rgba(255,255,0,1.00) 40%,
rgba(255,255,0,1.00) 60%,
rgba(0,255,0,1.00) 60%,
rgba(0,255,0,1.00) 80%,
rgba(0,51,255,1.00) 80%,
rgba(0,51,255,1.00) 100%);
}

Box 4

#box4 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,0,0,1.00) 18%,
rgba(255,153,0,1.00) 22%,
rgba(255,153,0,1.00) 38%,
rgba(255,255,0,1.00) 42%,
rgba(255,255,0,1.00) 58%,
rgba(0,255,0,1.00) 62%,
rgba(0,255,0,1.00) 78%,
rgba(0,51,255,1.00) 82%,
rgba(0,51,255,1.00) 100%);
}

Box 5

#box5 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,153,0,1.00) 30%);
}

Box 6

#box6 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,153,0,1.00) 30%,
rgba(255,255,255,1.00) 45%,
rgba(255,153,0,1.00) 60%,
rgba(255,153,0,1.00) 100%);
}

Box 7

#box7 {
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,0,0,1.00) 18%,
rgba(255,255,255,1.00) 20%,
rgba(255,153,0,1.00) 22%,
rgba(255,153,0,1.00) 38%,
rgba(255,255,255,1.00) 40%,
rgba(255,255,0,1.00) 42%,
rgba(255,255,0,1.00) 58%,
rgba(255,255,255,1.00) 60%,
rgba(0,255,0,1.00) 62%,
rgba(0,255,0,1.00) 78%,
rgba(255,255,255,1.00) 80%,
rgba(0,51,255,1.00) 82%,
rgba(0,51,255,1.00) 100%);
}

Box 8

#box8 {
background: linear-gradient(180deg,
rgba(255,255,255,1.00) 0%,
rgba(255,255,255, 1.00) 18%,
rgba(255,0,0,1.00) 20%,
rgba(255,255,255,1.00) 22%,
rgba(255,255,255,1.00) 38%,
rgba(255,153,0,1.00) 40%,
rgba(255,255,255,1.00) 42%,
rgba(255,255,255,1.00) 58%,
rgba(255,255,0,1.00) 60%,
rgba(255,255,255,1.00) 62%,
rgba(255,255,255,1.00) 78%,
rgba(0,255,0,1.00) 80%,
rgba(255,255,255,1.00) 82%,
rgba(255,255,255,1.00) 96%,
rgba(0,51,255,1.00) 100%);
}

CSS-kod:

#box2 {
width: 300px;
height: 350px;
float: left;
clear: right;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.4);
background: linear-gradient(180deg,
rgba(255,0,0,1.00) 0%,
rgba(255,153,0,1.00) 25%,
rgba(255,255,0,1.00) 50%,
rgba(0,255,0,1.00) 75%,
rgba(0,51,255,1.00) 100%);
}

HTML-kod:

<div id="box2">
<p> Textinnehåll här.</p>
</div>