CSS - Gradient

About

Color gradient in CSS are created via gradient functions that creates an image.

Functions

CSS - Function

• linear-gradient
• radial-gradient
• repeating-linear-gradient
• conic-gradient

The definitions and whole list can be found in the specification.

Example

linear-gradient

With the linear-gradient ¹⁾ function.

linear-gradient() = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list>)

where:

• angle or to side-or-corner defines the direction of the line
• color-stop-list defines color and their start and end position

Example: the french flag

• A box with a height and a width filled with a linear gradient

.french-flag {
  background-image: linear-gradient(to right, blue 0% 33%, white 33% 66%, red 66% 100%);
  height:100px;
  width:200px;
  border: 1px solid grey;
}

• The HTML

<div class="french-flag"></div>

• The result:

Documentation / Reference

• gradient functions