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

css html gradient
AngryHacker picture AngryHacker · Aug 17, 2010 · Viewed 61.8k times · Source

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

alt text

and I don't want it to actually use an image, just CSS. Is it possible?

Answer

user113292 picture user113292 · Aug 17, 2010

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.

Related questions

Use css gradient over background image

I've been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can't seem to be able to make it …

Read More
Gradient colors in Internet Explorer

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?

Read More
CSS3 for HTML5 Legend inside fieldset

Can you please suggest CSS to get effect as quoted below (using CSS3 gradient & borders) ? Current version of HTML is mentioned below: <section style="margin: 10px;"> <fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"> <…

Read More