Линейный градиент

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image.

Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного цвета к другому.

Для создания градиента нужно указать его начало и несколько цветов, например: background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left. Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый. 

<style>
 div {
width: 100%;
height: 100px;
background-color: #eee;
background-image: linear-gradient(left,black,white);
background-image: -o-linear-gradient(left,black,white);
background-image: -moz-linear-gradient(left,black,white);
background-image: -webkit-linear-gradient(left,black,white);
}
 p{
margin: 0;
padding-top: 30px;
text-align: center;
color:white;
}
</style>


<div><p>Линейный черно-белый градиент</p></div>

Линейный черно-белый градиент

Для установки начала градиента можно использовать следующие значения:

Например, вертикальный градиент будет выглядеть следующим образом:

background-image: linear-gradient(bottom,black,white); Также можно задать диагональное направление с помощью двух значений: background-image: linear-gradient(top left,black,white);

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента: background-image: linear-gradient(30deg,black,white);

0deg означает, что градиент начинается в левой части и перемещается в правую часть.

A 45deg начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.

Цветов не обязательно должно быть два, их может быть и больше: background-image: linear-gradient(top, red, #ccc, blue);

Все применяемые цвета распределяются равномерно. Однако можно также указать конкретные места фона для цветовых точек. Для этого после цвета добавляется второе значение, которое и определяет положение точки. background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Повторяющийся градиент

С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты.

Например: 

background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

Радиальный градиент

Радиальные градиенты в отличие от линейных распространяются от центра наружу по круговой схеме. Для создания радиального градиента достаточно указать цвет, который будет в центре градиента, и цвет, который должен быть снаружи. Эти цвета передаются в функцию radial-gradient(). Например: 

<style>
div {
width: 200px;
height: 200px;
border-radius: 100px;

background-color: #eee;
background-image: radial-gradient(white, black);
background-image: -moz-radial-gradient(white, black);
background-image: -webkit-radial-gradient(white, black);
}
 p{
margin: 0;
padding-top: 60px;
text-align: center;
color: #eee;
}
</style>

<div><p>Радиальный градиент</p></div>

Радиальный градиент

Радиальный градиент может иметь две формы: круговую и эллиптическую. Эллиптическая форма представляет распространение градиента в виде эллипса и задается с помощью ключевого слова ellipse: background-image: radial-gradient(ellipse, white, black);

Поскольку это значение для градиента по умолчанию, то оно может опускаться при использовании.

Круговая форма представляет распространение градиента в виде кругов от центра во вне. Для этого используется ключевое слово circle: background-image: radial-gradient(circle, white, black);

Как правило, центр радиального градиента расположен в центре элемента, но это поведение можно переопределить, указав значение для параметра background-position: background-image: radial-gradient(25% 30%, circle, white, black); Числа 25% 30% означают, что центр градиента будет находиться на расстоянии в 25% от левой границы и в 30% от верхней границы элемента.

С помощью специальных дополнительных значений можно задать размер градиента: