About
Color gradient in CSS are created via gradient functions that creates an image.
Functions
- 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 1) 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: