Table of Contents

About

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

Functions

CSS - Function

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:
Rendered by WebCode

Documentation / Reference

1)
linear-gradient specification