The gradient decorator renders a linear color gradient across the padded area of its element, in a horizontal or vertical direction.

decorator: gradient( <direction> <start-color> <stop-color> );

Properties

direction

Declares the direction of the color gradient.

start-color

Declares the start color, either at the left edge or top edge.

stop-color

Declares the stop color, either at the right edge or bottom edge.

Example

The following declares a button with a horizontal color gradient from a red-like color to a yellow-like color, and adds a border.

button
{
	decorator: gradient( horizontal #DB6565 #F1B58A );
	border: 2px #DB6565;
}