CSS Gradients

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