CSS3 градиент представляет собой переходы от одного цвета к другому. CSS3 поддерживает два типа градиентов: линейные градиенты, в которых переход цветов осуществляется от одной полосы цвета к другой, и радиальные градиенты, в которых переход идет радиально от центра концентрических или эллипсовидных кругов.

Для создания градиентов используется функция градиента — linear-gradient() или radial-gradient(), которая применяется к свойству background или background-color.

Если задавать градиент с помощью свойства background-color, то сначала нужно с помощью background задать резервное изображение для браузеров, не поддерживающих это свойство, а затем присвоить значение посредством градиентной функции. При этом браузеры, поддерживающие функцию градиента, не будут загружать резервное изображение.

Поддержка браузерами

    IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

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

Линейный градиент создается с помощью функции linear-gradient(). Равномерное распределение цветов градиента создается следующим способом:

div {
background: linear-gradient(to top left, white, lightblue);
}
div {
background-image: linear-gradient(to top left, white, lightblue);  /*если для блока также будет задан фон с помощью свойства background-color*/
}

Направление градиента можно задавать также с помощью угла наклона (deg), например:

	div {
background: linear-gradient(-45deg, white, lightblue);
}
или
div {
background: linear-gradient(60deg, white, lightblue);
}

Для неравномерного распределения цветов нужно указать позицию начала каждого цвета через точки остановки градиента (color stops).

Точки остановки градиентов указываются в %, где 0% — начало градиента, 100% — окончание градиента, например:

	div {
background: linear-gradient(to top, #90d7e9 0%, #9eadcc 20%, #ba95be 80%, #7aa4ce 100%);
}

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

	div {
background: linear-gradient(#ff0000 66px, #ffffff 67px, #ffffff 133px, #38bac7 134px);
}
или
div {
background: linear-gradient(to right, #38bac7 40px, #ffffff 41px, #ffffff 80px, #324a56 81px, #324a56 120px,#ffffff 121px, #ffffff 160px, #38bac7 160px);
}
или
div {
background: linear-gradient(to left, #f8ab8d, #ae7863 25%, #c1b59b 25%, #746d5d 50%, #e1d663 50%, #87803b 75%, #d1ead4 75%, #7d8c7f 100%);
}

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

Радиальный градиент создается с помощью функции radial-gradient(). По умолчанию форма градиента — круг, центр градиента совпадает с центром блока.

Градиенту можно придать форму эллипса, изменяя пару значений, идущих после формы градиента, заданных в % или px, например background: radial-gradient(55% 65%, blue, green, yellow). Первое значение задает размер по оси Х, второе — по оси Y.

	div {
background: radial-gradient(#38bac7, #324a56);
}
div {
background:radial-gradient(100px 50px, #38bac7, #324a56);
}
div {
background: radial-gradient(55px 55px,#3c485f, #c6c0b3);
}

	div {
border-radius: 50%; width: 200px; height: 200px;
background: radial-gradient(#38bac7, #324a56);
}
div {
background: radial-gradient(#38bac7 40px, #ffffff 41px, #ffffff 60px, #324a56 61px, #324a56 100px,  #ffffff 101px);
}
div {
background:radial-gradient(white 0%, white 10%, #0ba7e2 10%, #0ba7e2 50%, #ffaf2f 50%, #ffaf2f 100%);
}

Также можно менять положение градиента с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

3. Повтор градиента

Повтор градиента задается с помощью двух функций: repeating-linear-gradient() и repeating-radial-gradient()

	div {
background: repeating-linear-gradient(#c1b59b, #c1b59b 10px, white 10px, white 20px);
}
div {
background: repeating-linear-gradient(45deg, #c1b59b, #c1b59b 10px, white 10px, white 20px);
}
div {
background: repeating-linear-gradient(#74c3d2, #74c3d2 10px,#a8d7c7 10px, #a8d7c7 20px, #ffffcd 20px, #ffffcd 30px);
}
div {
background: repeating-linear-gradient(#a8d7c7 10%, #ffffcd 20%);
}
div {
background: repeating-radial-gradient(#a8d7c7 10%, #ffffcd 20%);
}
div {
background: repeating-radial-gradient(#74c3d2, #74c3d2 10px, #a8d7c7 10px, #a8d7c7 30px, #ffffcd 30px, #ffffcd 40px);
}

4. Градиент для разных браузеров

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

	div {
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Стандартная запись */
}
/*для неравномерного распределения градиента*/
div {
background: -webkit-linear-gradient(left, red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, green, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, green, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to left, red, green, blue); /* Стандартная запись,
добавляется предлог "to"*/
}
/*для радиального градиента*/
div {
background: -webkit-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* Safari 5.1 to 6.0*/
background: -o-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* Opera 11.6 to 12.0*/
background: -moz-radial-gradient(60% 55%, farthest-side, blue, green, yellow);/* For Firefox 3.6 to 15*/
background: radial-gradient(farthest-side at 60% 55%, blue, green, yellow); /* Стандартная запись,
добавляется предлог "at"*/
}