CSS3: Gradient Background Color

Okay... if you need to use an image anyway, why bother with declaring the gradient with CSS?

That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

<style type="text/css">

/*Horizontal Gradient Background*/
#linearBg1 {
height: 100px;
width: 760px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)) !important;
background-image: url(linear_bg_1.png);
}
/*Vertical Gradient Background*/
#linearBg2 {
height: 100px;
width: 760px;
background-color: #1a82f7; /* fallback color */;
background-image: url(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));
}

</style>