<Градиент> CSS

Тип значения gradient (от англ. gradient — градиент) — это особый тип изображения, который состоит из прогрессивного перехода между двумя или более цветами.

Градиент CSS не имеет собственных размеров; то есть он не имеет размера или предпочтительного отношения. Его конкретный размер будет соответствовать размеру элемента, к которому он относится.

Наследуется:
Нет
Анимируется:
Нет
Спецификации:

Синтаксис

/* Линейный градиент */
.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}
/* Радиальный градиент */
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
/* Повторяемый линейный градиент */
.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}
/* Повторяемый радиальный градиент */
.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

Значения

  • <function> — функция с описанием градиента

Примеры

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

Чтобы создать самый базовый тип градиента, вам нужно всего лишь указать два цвета. Они называются остановками цвета. У вас должно быть не менее двух, но вы можете иметь столько, сколько хотите.

.simple-linear {
  background: linear-gradient(blue, pink);
}

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

Изменение направления

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

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

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

Диагональные градиенты

Вы можете сделать градиент по диагонали, из угла в угол.

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

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

Использование углов

Если вы хотите контролировать свое направление, вы можете задать градиенту определенный угол.

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

Пример градиента с заданным углом
Пример градиента с заданным углом

Использование более двух цветов

Вам не нужно ограничивать себя двумя цветами — вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены вдоль градиента.

.auto-spaced-linear {
  background: linear-gradient(red, yellow, blue, orange);
}

Пример градиента с несколькими цветами
Пример градиента с несколькими цветами

Позиционирование цветовых стопов

Вам не обязательно оставлять свои цветовые стопы в положениях по умолчанию. Для точной настройки их местоположения вы можете дать каждому значение в процентах или абсолютной длине. Если вы укажете местоположение в процентах, 0% представляет собой отправную точку, а 100% — конечную точку; однако при необходимости вы можете использовать значения вне этого диапазона, чтобы получить необходимый эффект. Если вы оставите местоположение неуказанным, позиция этого определенного цвета будет автоматически рассчитана за вас.

.multicolor-linear {
  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
}

Пример градиента с заданным положением цветов
Пример градиента с заданным положением цветов

Наложение градиентов

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

Пример наложения градиентов
Пример наложения градиентов

Наложение градиентов

Вы даже можете накладывать одни градиенты на другие градиенты. Пока верхние градиенты не совсем непрозрачны, градиенты ниже будут по-прежнему видны.

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

Пример наложения градиентов
Пример наложения градиентов

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

Как и для линейного градиента, все что вам нужно для создания радиального градиента — это два цвета.

.simple-radial {
  background: radial-gradient(red, blue);
}

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

Позиционирование цветовых стопов

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

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Пример радиального градиента со стоп-цветами
Пример радиального градиента со стоп-цветами

Размеры радиальных градиентов

В отличие от линейных градиентов, вы можете указать размер радиальных градиентов.

Пример: ближайшая сторона для эллипсов

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

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для эллипсов
Пример: ближайшая сторона для эллипсов

Пример: самый дальний угол для эллипсов

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

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: самый дальний угол для эллипсов
Пример: самый дальний угол для эллипсов

Пример: ближайшая сторона для кругов

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

.radial-circle-close {
  background: radial-gradient(circle closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для кругов
Пример: ближайшая сторона для кругов

Наложение радиальных градиентов

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

.stacked-radial {
  background: 
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

Пример наложения радиальных градиентов
Пример наложения радиальных градиентов

Использование повторяемых градиентов

Свойства linear-gradient() и radial-gradient() не поддерживают автоматически повторяющиеся остановки цвета. Однако для этой функциональности доступны свойства repeating-linear-gradient() и repeat-radial-gradient().

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

В этом примере используется repeating-linear-gradient() для создания градиента, который прогрессирует многократно по прямой. Цвета повторяются снова и снова, когда градиент повторяется.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Пример повторяемых линейных градиентов
Пример повторяемых линейных градиентов

Несколько повторяющихся линейных градиентов

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
}

Пример нескольких повторяющихся линейных градиентов
Пример нескольких повторяющихся линейных градиентов

Градиент-шотландка

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
}

Пример градиента-шотландки
Пример градиента-шотландки

Повторяемый радиальный градиент

В этом примере используется repeat-radial-gradient() для создания градиента, который многократно излучает из центральной точки. Цвета повторяются снова и снова, когда градиент повторяется.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

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

Множественные повторяющиеся радиальные градиенты

.multi-target {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat, 
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

Пример множественного повторяющегося радиального градиента
Пример множественного повторяющегося радиального градиента