Styling the Background: Colors

The following options are available to set the colors for a gradient background:

• The first color of the gradient

• The second color of the gradient

• Switch to turn on the rainbow transition

• Sample colors to create a gradient with the selected first color

When the rainbow transition is switched on, the shortest path along the colors as they appear in the rainbow (ordered by their wavelength) is used and additional colors are added to the gradient. This eliminates any grey tones resulting from the mixture of colors with greatly varying wavelengths, which leads to the gradient appearing more vibrant.

Sample colors provide ideas for the colors to be used in combination with the first color.

Styling the Background: Position

The following options are available to define the angle and the relative positions of the colors:

• Gradient angle

• Position for the first and the second color

The slider that defines the position of the first and the second color has two handlers. The first handler corresponds to the first color. To define the gradient stretching across the whole body element, set the first handler to 0% (very left) and the second to 100% (very right).

Styling the Background: Animation

The following options are available to animate the background:

• Switch to turn on the animation

• Speed of the animation

The animation runs in an infinite cycle with the defined speed.

The below examples show design ideas for a cool gradient background.

The below examples show design ideas for a warm gradient background.

The below examples show design ideas for a rainbow gradient background.