ansaurus

Question

Answer 1

A:

No this is not possible you just can set plain color in CSS. The only way to do is to create an image an set it as background.

#yourdiv {
  background: transparent url(yourimg.png) 0 0 scroll no-repeat;
}

EDIT: like said in the other answers it is possible in some browsers. But when speaking of possible I like to reefer to most the browsers.

Tim 2010-01-13 06:50:17

Any good sites for getting good gradient images?

Brian 2010-01-13 06:51:34

Creating gradients is very easy in Photoshop, GIMP or even online with Aviary: http://aviary.com/

pygorex1 2010-01-13 06:54:12

Answer 2

+6 A:

Safari (Webkit) supports it: http://webkit.org/blog/175/introducing-css-gradients/

Firefox 3.6+ supports it: https://developer.mozilla.org/en/CSS/-moz-linear-gradient

W3 spec defines support for it: http://dev.w3.org/csswg/css3-images/#gradients-

And you can use Modernizr to detect support and fall back on an image: http://www.modernizr.com/docs/#cssgradients

Renesis 2010-01-13 06:51:47

Hm, and WebKit went ahead and invented their own syntax different from the W3 one. Genius. But still, keep in mind that the alleged "definition" is no more than a draft, so the W3C hasn't defined anything, they're still pondering how it might look like.

Joey 2010-01-13 06:56:35

Answer 3

+1 A:

Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.

pygorex1 2010-01-13 06:52:07

While still using images, a flexible solution: http://www.alistapart.com/articles/supereasyblendys/

donut 2010-01-13 06:53:36