How to make a pure CSS div with a gradient background?

Let's say the height of the div is 34px and the width is 480px. The div should look like this:

and I don't want it to actually use an image, just CSS. Is it possi开发者_C百科ble?

It is with CSS3. There's even a handy gradient generator which takes the guesswork out of it. Of course, this is completely unsupported in IE8 and under.

Edit

For the sake of completeness, as sluukkonen mentioned, IE does support gradients in CSS using the filter filter:progid:DXImageTransform.Microsoft.Gradient.

It is possible with CSS3;

Example: (black and grey)

mydiv
{

   background-image:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}

But this only works in Mozilla and webkit browsers, IE8 and under will ignore this.

Hope it helps :)

There are ways to do this with -webkit-gradient and -moz-linear-gradient 'functions' as values of background-image. These use different syntax but will be standardised if the gradient spec makes it into CSS 3's final release.

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);