css3 backgrounds

nice monotone backgrounds

by secretgspot

HTML

<div id="wrap">

<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
<div id="box04"></div>
<div id="box05"></div>
<div id="box06"></div>
<div id="box07"></div>
<div id="box08"></div>
<div id="box09"></div>

</div>

CSS

body {
    padding-top: 50px;
} 
#wrap {
    width: 258px;
    margin: 0 auto;
}
#wrap div {
        float: left;
        margin: 0 3px 6px;
        width: 80px;
        height: 80px;
}
#box01 {
    background-image: -webkit-gradient(linear, left top, right top, from(#eee), color-stop(50%, #eee), color-stop(50%, #ddd), to(#ddd));  
    background-image: -moz-linear-gradient(left, #eee, #eee 50%, #ddd 50%, #ddd); 
    
    background-size: 2px;
    -webkit-background-size: 2px;
    -moz-background-size: 2px;
}
#box02 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(50%, #eee), color-stop(50%, #999), to(#999));  
    background-image: -moz-linear-gradient(#eee, #eee 50%, #999 50%, #999);
    
    background-size: 2px;
    -webkit-background-size: 2px;
    -moz-background-size: 2px;
}
#box03 {
    background-image: -webkit-gradient(linear, left top, right bottom, from(#eee), color-stop(25%, #eee), color-stop(25%, #999), color-stop(50%, #999), color-stop(50%, #eee), color-stop(75%, #eee), color-stop(75%, #999), to(#999));  
    background-image: -moz-linear-gradient(-45deg, #eee, #eee 25%, #999 25%, #999 50%, #eee 50%, #eee 75%, #999 75%, #999);
    
    background-size: 3px;
    -webkit-background-size: 3px;
    -moz-background-size: 3px;
}
#box04 {
    background-image:
    -webkit-gradient( linear, left top, left bottom, from(rgba(255,255,255,0.1)), color-stop(50%, rgba(255,255,255,0.1)), color-stop(50%, rgba(0,0,0,0.1)), to(rgba(0,0,0,0.1))),
    -webkit-gradient( linear, left top, right top, from(white), color-stop(50%, white), color-stop(50%, #ccc), to(#ccc));
    background-image:
    -moz-linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1) 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)),
    -moz-linear-gradient(left, #fff, #fff 75%, #ccc 75%, #ccc);

    background-size: 3px;
    -webkit-background-size: 3px;
    -moz-background-size: 3px;
}
#box05 {
    background-image: -webkit-gradient(radial, 50% 50%, 0,...