Gradients
A gradient can be used as an -ah-background-image value. Available types are linear-gradient(), radial-gradient(), repeating-linear-gradient() and repeating-radial-gradient(). The orientation of the gradient, color ratio and shape can be specified.

Linear gradient

A linear gradient can be specified as -ah-background-image: linear-gradient(0deg, darkorange, yellow). Values indicate the orientation and color, in order. The angle can also be specified using the keywords ‘to top’ (0deg), ‘to right’ (90deg), ‘to bottom’ (180deg) or ‘to left’ (270deg).

-ah-background-image: linear-gradient(0deg, darkorange, yellow);

-ah-background-image: linear-gradient(to right, darkorange, yellow);

-ah-background-image: linear-gradient(0deg, darkorange, yellow, darkorange);

-ah-background-image: linear-gradient(0deg, darkorange 50%, yellow);
The position of the gradient's color stop can be expressed by specifying "darkorange 50%"

Radial-gradient

The radial gradient can be specified as -ah-background-image: radial-gradient(circle 100% at center, yellow, darkorange). Values indicate the shape and size of the gradient,

-ah-background-image: radial-gradient(circle 100% at center, yellow, darkorange);

-ah-background-image: radial-gradient(yellow, darkorange);

-ah-background-image: radial-gradient(yellow, darkorange, yellow);

-ah-background-image: radial-gradient(circle at top left, yellow, darkorange);

-ah-background-image: radial-gradient(circle closest-side at 30px 10px, yellow, darkorange);
The size and position of the gradient can be set by specifying the value to 'closest-side', 'farthest-side', 'closest-corner' and 'farthest-corner'.

Repeating linear-gradient() and the repeating radial-gradient()

‘repeating-linear-gradient()’ and ‘repeating-radial-gradient()’ can be specified as the value of ‘background-image’. They are specified in the same way as ‘linear-gradient()’ and ‘radial-gradient()’.

-ah-background-image: linear-gradient(0deg, darkorange, yellow);

-ah-background-image: linear-gradient(to right, darkorange, yellow);

-ah-background-image: linear-gradient(to right, darkorange, yellow);