User:VladVukicevic/CSS Background Gradient

Scratchpad for a potential moz CSS extension for background gradients.

-moz-background-gradient: horizontal red green;

horizontal gradient from red to green (left to right)

-moz-background-gradient: vertical red green;

vertical gradient from red to green (top to bottom)

-moz-background-gradient: 10px 10px 75px 75px red green;

gradient from (10,10) to (75,75) from red to green; regions before = red, after = green (gradients are always padded). XXX coord spec should maybe be top right bottom left, like normal css

-moz-background-gradient: 10px 75px 75px 10px red,0.1 green,0.5 blue,0.9

gradient from (10,10) to (75,75) (using TRBL), starting at red at 10%, to green at 50%, to blue at 90%

Interaction with background images... ideally, a background image should be painted over the gradient. However, that makes it harder to use images for fallback for gradients for non-gecko browsers. So maybe...

-moz-background-gradient-rendering: gradient-only | auto;

if 'auto' (the default), any background color is painted, then any gradient, then any background image. If 'gradient-only', only the gradient is painted.

... or maybe ...

-moz-background-order: color gradient image;

Specify the background painting order explicitly; omitted elements aren't painted.