= CSS Gradients =

<<TableOfContents>>

----



== Gradients ==

There are three types of gradients:

 * `linear-gradient`
 * `radial-gradient`
 * `conic-gradient`

These each take 2 or more colors which are stepped through by the gradient function. There are further optional arguments described below.

There are also `repeating-` versions of each function.



=== Direction ===

The optional first argument to a gradient function sets the direction. It can either be a '''key phrase''' or an '''angle'''.

Each of the following key phrases are valid:

 * `to top`
 * `to top right`
 * `to right`
 * `to bottom right`
 * `to bottom`
 * `to bottom left`
 * `to left`
 * `to top left`

Valid units for angles are:

 * `deg`
 * `rad`
 * `grad`
 * `turn` which is a metric expression of circles; `1turn` equals `360deg`

{{{
.gradient {
  linear-gradient(to left top, #fff, #000);
}
}}}



=== Color Hints ===



=== Color Stops ===

----



== Animated Gradients ==

Gradients are images and as such cannot be ''directly'' animated. Instead apply a transition effect on their position.

{{{
.gradient {
  background-image: linear-gradient(45deg, #fff, #000);
  background-size: 300%;
  background-position: left;
  transition: background-position 1s;
}

.gradient:hover {
  background-position: right;
}
}}}



----
CategoryRicottone