hsl background gradient

#1 rainbow with css gradients : finding color-stops

by toubia95

HTML

<div id="rainbox1"></div>
<div id="rainbox2"></div>
<div id="rainbox3"></div>
<div id="rainbox4"></div>

CSS

body {
    padding: 50px;
}
#rainbox1 {
    width: 100%;
    height: 20px;
    background: -moz-linear-gradient(left, 
        hsl(0,100%,50%), 
        hsl(120,100%,50%),
        hsl(240,100%,50%),
        hsl(360,100%,50%)
    );
}
#rainbox2 {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background: -moz-linear-gradient(left, 
        hsl(0,100%,50%), 
        hsl(60,100%,50%),
        hsl(120,100%,50%),
        hsl(180,100%,50%),
        hsl(240,100%,50%),
        hsl(300,100%,50%),
        hsl(360,100%,50%)
    );
}
#rainbox3 {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background: -moz-linear-gradient(left, 
        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%)
    );
}
#rainbox4 {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background: -moz-linear-gradient(left, 
        hsl(0,100%,50%), 
        hsl(15,100%,50%),
        hsl(30,100%,50%),
        hsl(45,100%,50%),
        hsl(60,100%,50%),
        hsl(75,100%,50%),
        hsl(90,100%,50%),
        hsl(105,100%,50%),
        hsl(120,100%,50%),
        hsl(135,100%,50%),
        hsl(150,100%,50%),
        hsl(165,100%,50%),
        hsl(180,100%,50%),
        hsl(195,100%,50%),
        hsl(210,100%,50%),
        hsl(225,100%,50%),
        hsl(240,100%,50%),
        hsl(255,100%,50%),
        hsl(270,100%,50%),
        hsl(285,100%,50%),
        hsl(300,100%,50%),
        hsl(315,100%,50%),
        hsl(330,100%,50%),
        hsl(345,100%,50%),
        hsl(360,100%,50%)
    );
}