Complex gradients done with box-shadow

This enables horizontal & vertical linear-gradients in IE9 and also fixes visual fidelity problems in other browsers (FF + Chrome)

by Jens Grochtdreis

HTML

This enables horizontal & vertical linear-gradients in IE9 and also fixes visual fidelity/precision problems related to gradients in other browsers (FF + Chrome)
<div class="example1a">CSS3 Gradients</div>
<div class="example1b">CSS3 Box Shadows</div>
<div class="example2a">CSS3 Gradients</div>
<div class="example2b">CSS3 Box Shadows</div>
<div class="example3a">CSS3 Gradients</div>
<div class="example3b">CSS3 Box Shadows</div>
<div class="example4a">CSS3 Gradients</div>
<div class="example4b">CSS3 Box Shadows</div>

CSS

div {
    width: 250px;
    height: 250px;
    margin: 10px;
    padding: 25px;
}
.example1a {
    background-color:#9D65AB;
    background-image: -moz-repeating-linear-gradient(180deg, #9D65AB, #52FF26 50px);
    background-image: -webkit-repeating-linear-gradient(180deg, #9D65AB, #52FF26 50px);
    background-image: -o-repeating-linear-gradient(180deg, #9D65AB, #52FF26 50px);
    background-image: -ms-repeating-linear-gradient(180deg, #9D65AB, #52FF26 50px);
    background-image: repeating-linear-gradient(180deg, #9D65AB, #52FF26 50px);
}
.example1b {
    background-color:#9D65AB;
    -webkit-box-shadow: 
        inset 50px 0 50px -25px #52FF26, 
        inset 75px 0 0 -25px #9D65AB, 
        inset 100px 0 50px -25px #52FF26,
        inset 125px 0 0 -25px #9D65AB, 
        inset 150px 0 50px -25px #52FF26,
        inset 175px 0 0 -25px #9D65AB, 
        inset 200px 0 50px -25px #52FF26,
        inset 225px 0 0 -25px #9D65AB,
        inset 250px 0 50px -25px #52FF26,
        inset 275px 0 0 -25px #9D65AB, 
        inset 300px 0 50px -25px #52FF26,
        inset 325px 0 0 -25px #9D65AB;
    -moz-box-shadow: 
        inset 50px 0 50px -25px #52FF26, 
        inset 75px 0 0 -25px #9D65AB, 
        inset 100px 0 50px -25px #52FF26,
        inset 125px 0 0 -25px #9D65AB, 
        inset 150px 0 50px -25px #52FF26,
        inset 175px 0 0 -25px #9D65AB, 
        inset 200px 0 50px -25px #52FF26,
        inset 225px 0 0 -25px #9D65AB,
        inset 250px 0 50px -25px #52FF26,
        inset 275px 0 0 -25px #9D65AB, 
        inset 300px 0 50px -25px #52FF26,
        inset 325px 0 0 -25px #9D65AB;
    box-shadow: 
        inset 50px 0 50px -25px #52FF26, 
        inset 75px 0 0 -25px #9D65AB, 
        inset 100px 0 50px -25px #52FF26,
        inset 125px 0 0 -25px #9D65AB, 
        inset 150px 0 50px -25px #52FF26,
        inset 175px 0 0 -25px #9D65AB, 
        inset 200px 0 50px -25px #52FF26,
        inset 225px 0 0 -25px #9D65AB,
        inset 250px 0 50px -25px...