CSS3 Gradient Background

Linear background 180degree

#linearBg1 {
    height: 100px;
    background-color: #1a82f7;
    background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important;
    background-image: url(images/linear_bg_1.png);// fallback image
}

Linear background 90degree

#linearBg2 {
    height: 100px;
    background-color: #1a82f7; /* fallback color */
    background-image: url(images/linear_bg_2.png); /* fallback image */
    background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Radial background

#radialBg {
    width: 100px;
    height: 100px;
    background-image: url(images/radial_bg.png);// fallback image
    background-position: center center;
    background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%);
    background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#2F2727), to(#2F2727));
}

More script and css style : www.htmldrive.net