How to create cross browser CSS gradient background without image

The common practice to create gradient background is use images. You can set url with your gradient to background property in css file and nothing more.

But you can also create vertical and horizontal background gradient using css without images

This technic works in the most browsers and it's easy to use and understand.

Browsers supporting css gradient background

• Firefox >=3.6
• MSIE >=5.5 (!)
• Safari >=4
• Chrome

Gradient background without image for Firefox

Firefox support css property -moz-linear-gradient, using this property you can create both vertical and horizontal gradient only using CSS, without images. You can use it this way

background: -moz-linear-gradient(top, #880000, #000000);

The first parameter shows the direction of gradient, top means than gradient will be from bottom to top. The first color is start color, and the second color is finish gradient color.

Gradient background CSS without images in Chrome and Safari

Chrome and Safari support -webkit-gradient css property. The usage is below:

background: -webkit-gradient(linear,
                left top, left bottom, from(#880000), to(#000000));

First parameter is type of gradient, it can be either linear or radial. The second two parameters show direction of gradient, for example here gradient starts at left top corner of the element and finishes at left bottom corner of element.
And the last two parameters show start and end colors.

Notes:

• A gradient applied to a rectangle area is called a linear gradient.
• A gradient specified using circles is called a radial gradient.

Gradient background without images for Internet explorer

Internet explorer is also supports gradient background using DXImageTransform.Microsoft.Gradient function.

filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#880000', EndColorStr='#000000', GradientType=0);

Background gradient without image for Microsoft Internet Explorer has three parameters:

• First is start color
• second is end color
• and third is direction of gradient (0 - vertical gradient, 1 - horizontal gradient)

And below is full CSS code for cross browser gradient without image

Vertical background gradient CSS  

.vertical-background-gradient-css{
    /* for browsers not supporting gradient without image */
    background: #008800;
    /* Mozilla Firefox: */
    background: -moz-linear-gradient(top, #aa0000, #000000);
    /* Chrome and Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#aa0000), to(#000000));
    /* Microsoft Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#aa0000', EndColorStr='#000000', GradientType=0);
  }

Horizontal background gradient CSS

.horizontal-background-gradient-css{
    /* for browsers not supporting gradient without image */
    background: #008800;
    /* Mozilla Firefox: */
    background: -moz-linear-gradient(left, #aa0000, #000000);
    /* Chrome and Safari:*/
    background: -webkit-gradient(linear,
                left top, right top, from(#aa0000), to(#000000));
    /* Microsoft Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#aa0000', EndColorStr='#000000', GradientType=1);
  }

And a couple of examples using background css gradient without image:

The first div contains vertical gradient

The second div contains horizontal gradient