The days of old during which developers would need to use images to have any sort of gradients on web pages are gone. With new CSS3 techniques and better support for CSS3 on newer browser versions, what used to require an additional image request, can now be rendered (generally) by the browser with no additional overhead.

To make it even easier to implement gradients, many developers and designers have created online tools to generate the CSS code. As far as gradients go, the best such tool available on the internet is the Ultimate CSS Gradient Generator. Simply select your start and end colors (and others in between if you so choose), and the CSS3 gradient generator will pop out the CSS code. Here’s an example of a simple blue gradient:

<style type="text/css">
.gradient {
  background: rgb(254,255,255);
  background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(221,241,249,1) 35%, rgba(160,216,239,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(35%,rgba(221,241,249,1)), color-stop(100%,rgba(160,216,239,1)));
  background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%);
  background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%);
  background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%);
  background: linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );
}
</style>

Now, simply create a div or any other element you’d like (make sure it’s a block element), and add the class:

<div class="gradient">inside content</div>

Voila!