<style>
body {
width: 100%;
height: 100%;
background: linear-gradient(-60deg, #8FFFD4 15%, #73FFFF 42%, #428BFF 85%);
background-size: 200% 200%;
animation: ani_gradient 5s ease infinite;
}
@keyframes ani_gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
</style>
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.
