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

Question

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 possible?

Answer 1

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 .

Answer 2

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 :)

Answer 3

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%
);