Pure CSS Rainbow Background

	<div id="Rainbow">
		<div id="red" class="rainbow-color"></div>
		<div id="orange" class="rainbow-color"></div>
		<div id="yellow" class="rainbow-color"></div>
		<div id="green" class="rainbow-color"></div>
		<div id="blue" class="rainbow-color"></div>
		<div id="indigo" class="rainbow-color"></div>
		<div id="violet" class="rainbow-color"></div>
	</div>

body {
    background-color: #BFEDFF;
    margin: 0;
}
#Rainbow {
    height: 100%;
    opacity: 0.7;
    overflow: hidden;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 100%;
    z-index: -1;
}
#Rainbow .rainbow-color {
    height: 100%;
    margin-right: 20px;
    width: 14%;
    display: inline-block;
}
#Rainbow #red {
    background-color: #D10000;
    box-shadow: 25px 0 50px 25px #D10000;
}
#Rainbow #orange {
    background-color: #FF6622;
    box-shadow: -25px 0 50px 25px #FF6622, 25px 0 50px 25px #FF6622;
}
#Rainbow #yellow {
    background-color: #FFDA21;
    box-shadow: -25px 0 50px 25px #FFDA21, 25px 0 50px 25px #FFDA21;
}
#Rainbow #green {
    background-color: #33DD00;
    box-shadow: -25px 0 50px 25px #33DD00, 25px 0 50px 25px #33DD00;
}
#Rainbow #blue {
    background-color: #1133CC;
    box-shadow: -25px 0 50px 25px #1133CC, 25px 0 50px 25px #1133CC;
}
#Rainbow #indigo {
    background-color: #220066;
    box-shadow: -25px 0 50px 25px #220066, 25px 0 50px 25px #220066;
}
#Rainbow #violet {
    background-color: #330044;
    box-shadow: -25px 0 50px 25px #330044;
}