double gradient

by DoubleYo

HTML

<div id="linear-radial"></div>
<div id="double-linear"></div>

CSS

div {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
}
div:after {
    content : ' ';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

#linear-radial {
    background: -webkit-gradient(linear, 0 0, 0 200, from(rgba(220,30,50,1)), to(rgba(10,150,20,1)));
}
#linear-radial:after {
    background: -webkit-gradient(radial, center center, 0, center center, 200, from(rgba(65,100,220,.5)), to(rgba(240,200,90,.5)));
}

#double-linear {
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(144,0,255,1)));
}
#double-linear:after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgba(0,0,0,1)));
}