2.15. CSS3-градиент

gradient-cssCSS3-градиент представляет собой переходы от одного цвета к другому.

Градиенты создаются с помощью функций linear-gradient() и radial-gradient().

Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image.

Как сделать градиент в CSS

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

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()

linear-gradient-axis
Рис. 1. Линия градиента, начальная и конечная точки и угол градиента

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

Если направление не указано, используется значение по умолчанию — сверху-вниз.

Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.

{background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.);}

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

div {
height: 200px;
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}

с помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно.

div {
height: 200px;
background: linear-gradient(to right, #F6EFD2, #CEAD78);
}

Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.

div {
height: 200px;
background: linear-gradient(to top left, powderblue, pink);
}

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

div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}

Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:

div {
height: 200px;
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
}

2. Радиальный градиент radial-gradient()

Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.

{background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);}

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

div {
height: 200px;
background: radial-gradient(at top, #FEFFFF, #A7CECC);
}

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}

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

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse.
farthest-side Размер рассчитывается из расстояния до дальних сторон.
closest-corner Размер рассчитывается из расстояния до ближних углов.
farthest-corner Размер рассчитывается из расстояния до дальних углов.
div {
height: 200px;
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);
}

С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.

Мяч

div {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}

Кнопка

<div class="wrap"><div class="button"></div></div>
.wrap {
height: 200px;
padding: 50px 0;
background: #cccccc;
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto; 
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
}

Почтовая марка

Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.

<div class="container">
<div class="wrap">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-florchik-2.jpg">
</div>
</div>
.container {
background: #B7D1D8;
padding: 25px;
}
.wrap {
background: radial-gradient(transparent, transparent 4px, white 4px,white);
padding: 10px;
width: 300px;
height: 220px;
background-size: 20px 20px;
background-position: -10px -10px; /*обрезаем узор по краю*/
margin: 0 auto;
}
img {
width: 100%;
}

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

В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.

div {
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
div {
height: 200px;
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
}

4. Кроссбраузерный градиент

Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

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

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */
background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */
background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */
background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

Повтор линейного градиента

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

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

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */
background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ 
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

Повтор радиального градиента

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

5. Комбинация градиента и фонового изображения

За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.

div {
  height: 453px;
  background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg); 
  background-size: cover;
}
  • Красота. Срочно учиться.

  • Создание Сайтов

    Ие и его братан сафари не читают радиальные градиенты.

    • IE с десятой версии, для Safari добавьте
      background: -webkit-radial-gradient(circle, blue, green, yellow); /*если обычный градиент*/
      background: -webkit-radial-gradient(60% 55%, blue, green, yellow); /* для градиента со смещенным центром */
      background: -webkit-radial-gradient(30% 10%, closest-corner, white, black); /* для градиента со смещенным центром */

      • Создание Сайтов

        Да не у меня стоит на ноуте для теста старый сафари, он не работает, и ие 7, 8, 9. Они не видят.

        • Все правильно, потому что эти версии в принципе не поддерживают эти свойства.

          • Создание Сайтов

            вот и получается, что такие градиенты ставить не стоит, потому что у кого (из непродвинутых) семерка винда стоит, там обязательно будет стоять старый ие.

          • Во-первых, посмотрите статистику по браузерам http://alexvaleev.ru/browserstat/2016/1/
            Старый ИЕ использует малая часть пользователей и поскольку они не продвинутые, то и не обратят внимание на внешний вид элементов. Как вариант, сначала указывать background-color: цвет, а за ним background-image: градиент.
            Вообще, сообщество разработчиков давно забило на старые версии, таких пользователей мало, а кода для кроссбраузерности будет много (там используется filter, но я бы не стала с этим заморачиваться).

  • Сергей Клевцов

    Интересно, а гуру сами проверяли свои примеры или лень было?

    • А что именно не работает?

      • Сергей Клевцов

        вот это попробуйте например:

        div {

        background: linear-gradient(#ff0000 66px, #ffffff 67px, #ffffff 133px, #38bac7 134px);

        }

        Никакой ошибки не замечаете, нет?

        • Это не ошибка. Если направление градиента не указано, используется значение по умолчанию «сверху вниз», подробнее здесь http://www.w3schools.com/css/css3_gradients.asp

          • Сергей Клевцов

            Вы в браузере проверьте просто и сравните. Тут не в направлении дело вообще-то.

          • Вероятно вы имеете в виду, что если просто взять этот код и задать его пустому блоку, то ничего не произойдет. Дело в том, что все эти примеры были сделаны для блока шириной и высотой 200px. Признаю, статья нуждается в обновлении, вы правы, что не очень понятны примеры. Как раз занимаюсь её улучшением.

  • Igor Nedbailo

    Градиенты — огонь! Спасибо!

  • Борис Фиафилов

    Можно ли нижней границе блока сделать линейный градиент из 4 цветов с резким переходом между ними?

  • Freeman4D

    Почему здесь указано выражение с процентами прозрачности, а на деле в Google Chrome не работает?!
    «Примечание: Определение и последствия «предварительно умноженные» цветовых пространств приведены в другом месте в технической литературе, но быстрый праймер дается здесь , чтобы осветить процесс. Принимая во внимание цвет , выраженный как RGBA () 4-кортеж, можно преобразовать это предварительно умноженные представления путем умножения красного, зеленого и синего компонентов с помощью альфа — компонента. Например, частично прозрачный синий может быть дано как RGBA (0,0,255, .5), который затем будет выражено как [0, 0, 127,5, .5] в своем представлении предварительно умноженные. Интерполирующие цвета с использованием предварительно умноженные представлений , а не простые Rgba представления имеет тенденцию производить более привлекательные переходы, особенно при переходе от полностью непрозрачного цвета до полной прозрачности. Обратите внимание , что переходы , где или прозрачность или цвет неизменны (например, переход между RGBA (255,0,0,100%) и RGBA (0,0,255,100%) или RGBA (255,0,0,100%) и RGBA ( 255,0,0,0%)) имеют одинаковые результаты , будет ли сделано цвет интерполяции в предварительно умноженные или не предварительно умноженные цветового пространства. Различия возникают только тогда , когда как цвет и прозрачность различаются между двумя конечными точками.» © https://drafts.csswg.org/css-images-3/#linear-gradients

  • Вы читаете черновики (drafts) спецификации, которые имеют неофициальный статус http://caniuse.com/#search=rgba. Допустимые значения для цветов здесь https://www.w3schools.com/CSSref/css_colors_legal.asp.

  • 1) https://html5book.ru/poleznye-servisy-html/, он там уже давно в списке;
    2) Не сталкивалась с этим полифилом, можете попробовать srcset для img;
    3) Сама не использую, так как не занимаюсь разработкой на потоке;
    4) Все статусы вы можете отслеживать здесь https://www.w3.org/Style/CSS/current-work.en.html
    Насчёт вашего вопроса про % в rgba — чем вас не устраивает не процентная запись?

  • Пожалуйста)) Может вам заодно с hsla() поэкспериментировать?