Slalomsk8er wrote:
Ben Ward wrote:

That seems to me to be straying into the area of SVG.

Whilst I agree with you that this is perfectly possible to do with
SVG, I also agree the others that providing *simple* gradients in CSS
would be beneficial to the CSS developer base. The effort of producing
an image for a simple gradient is quite undesirable.

To define simple, I mean:
* start colour
* end colour
* direction

More complex gradients with defined start points, > 2 colours, etc.
really should be left for SVG, in my opinion, but something with a
'small' syntax would be nice.

As for syntax, perhaps:
  background-color: gradient(start-color, end-color, direction);

Where the colours can be any valid CSS colour value, and direction is
specified in degrees (0-259).

I wouldn't want anything more complex that that. By way of example,
Microsoft are currently using their proprietary gradient filter on
their homepage (, IE only) to nice effect. The syntax is
ghastly, but the actually effect very simple and effective.


gradient(type, start-color, end-color, weight, offset, direction);

type can be one of the following (look at GIMPs Blend tool):
Linear (lin)
Bi-Linear (bi-lin)
Quadratic (quad)(see texture tool blend in the software from

Radial[-bi-lin|-quad] (lin is the default)
Shaped[-bi-lin|-quad] (box)

two integers
fist color part (1) second color part (2) (1 2 means the second colors weight is double the weight of the first color)

% of gradient distance till start of gradient

words (topleft to bottomright)
inside out (Shape)
outside in (Shape)

This would be all a webmaster can hope for in CSS ;)
Spiral gradients and other "cool" stuff needs to be implemented in the Website via SVG.

Maybe a list of colors for a gradient would not be that much more code to implement.


Personally, I think it might be a better idea to use an @-rule for defining gradients.  Though SVG can do gradients, I was just suggesting something that could be used in CSS to do simple gradients on borders, text and other places where you'd otherwise define a color, without having to require the user to download an image file.  But because of the general unknowns in gradient definition, I think an @-rule might work better.  Plus making it an @-rule allows for future expansion a little better than using a function, I think.

-- - Get Firefox! - Reclaim Your Inbox!

Please avoid sending me Word or PowerPoint attachments.