Straight gradients are supported with the horizontal-gradient and vertical-gradient decorators. They render a linear color gradient across the area of the element they are being applied to, in either a horizontal or a vertical direction.

decorator: horizontal-gradient( <start-color> <stop-color> ) <paint-area>?;
decorator: vertical-gradient( <start-color> <stop-color> ) <paint-area>?;

Straight gradients can be described as a subset of linear gradients. The main motivation for straight gradients is that they can be rendered even without shader support from the renderer. Straight gradients only use vertex colors, which makes them simpler and lighter to render. For this reason, they should be preferred when possible.

Properties

start-color

Declares the start color, that is, at the left or top edge.

stop-color

Declares the stop color, that is, at the right or bottom edge.

paint-area

Declares the box area to render the decorator onto.

Examples

The following RCSS declares two buttons, one with a vertical gradient and another with a horizontal gradient.

button.vertical {
	decorator: vertical-gradient( #415857 #5990a3 );
	border: 3px #415857;
	border-radius: 8px;
}

button.horizontal {
	decorator: horizontal-gradient( #db6565 #f1b58a );
	border: 3px #db6565;
	border-radius: 8px;
}

The rendered result: