Использование градиентов CSS

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

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

.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);
}

При использовании угла 0deg создаёт вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Все типы CSS-градиентов представляют собой диапазон цветов, зависящих от позиции. Цвета, создаваемые CSS-градиентами, могут плавно изменяться в зависимости от позиции, создавая плавные цветовые переходы. Также возможно создание полос твёрдых цветов и резких переходов между двумя цветами. Следующие параметры применимы ко всем функциям градиентов:

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

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

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

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

Чтобы создать резкую линию между двумя цветами, создавая полосу вместо плавного перехода, смежные цветовые остановки можно установить на одинаковое местоположение. В этом примере цвета разделяют цветовой стоп на отметке 50%, в середине градиента:

.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

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

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

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

.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

В первом примере лиловый цвет идёт от отметки 0%, которая подразумевается, до отметки 20%, переходит от лилового к красному на следующих 10% ширины градиента, достигает твёрдого красного цвета на отметке 30% и остаётся твёрдо красным до 45% градиента, где он переходит в голубой, полностью голубой на 15% градиента и так далее.

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

В обоих примерах градиент написан дважды: первый — это метод CSS Images Level 3 повторения цвета для каждой остановки, а второй пример — метод CSS Images Level 4 с несколькими цветовыми остановками, включающий два длины цветовых остановок в объявлении линейной цветовой остановки.

По умолчанию градиент равномерно переходит между цветами двух смежных остановок цвета, при этом середина между этими двумя остановками цвета является средним значением цвета. Вы можете контролировать интерполяцию, или прогрессию, между двумя остановками цвета, включив расположение подсказки цвета. В этом примере цвет достигает середины между цветом лайм и цветом циан на 20% пути градиента, а не на 50%. Во втором примере нет подсказки, чтобы выделить разницу, которую может внести подсказка цвета:

.color-hint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}

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

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

Помимо прозрачности, накладывая несколько полупрозрачных градиентов и накладывая градиенты на растровые фоновые изображения, градиенты могут использоваться с другими эффектами CSS. В этом примере четыре элемента <div> имеют одинаковые два полностью непрозрачных градиента в качестве фоновых изображений. Мы применяем разные значения свойства CSS background-blend-mode к последним трём, которые смешивают два фоновых изображения, создавая разные эффекты.

div {
  background: linear-gradient(to top, red, blue),
    linear-gradient(to right, #5500ff, #00ff55);
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.difference {
  background-blend-mode: difference;
}

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

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

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

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

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

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

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

В отличие от линейных градиентов, вы можете указать размер радиальных градиентов. Возможные значения включают closest-corner, closest-side, farthest-corner, и farthest-side, при этом farthest-corner является значением по умолчанию. Круги также могут быть заданы размером с помощью длины, а эллипсы — с помощью длины или процента.

Пример: closest-side для эллипсов

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

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

Пример: farthest-corner для эллипсов

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

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

Пример: closest-side для кругов

В этом примере используется closest-side, что делает радиус окружности расстоянием между центром градиента и ближайшей стороной. В данном случае радиус является расстоянием между центром и нижним краем, потому что градиент расположен на 25% от левой стороны и 25% от нижней стороны, а высота элемента div меньше ширины.

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

Пример: длина или процент для эллипсов

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

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

Пример: длина для кругов

Для кругов размер может быть задан как <length>, что является размером круга.

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

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

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

Функция conic-gradient() CSS создаёт изображение, состоящее из градиента с цветовыми переходами, вращающимися вокруг центральной точки (вместо того, чтобы исходить от центра). Примерами конических градиентов являются круговые диаграммы и цветовые круги, но они также могут использоваться для создания шахматных досок и других интересных эффектов.

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

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

Как и в линейных и радиальных градиентах, для создания конического градиента требуются два цвета. По умолчанию центр градиента находится в метке 50% 50%, а начало градиента направлено вверх:

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

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

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

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

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}

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

Размер повторяющейся линии или дуги градиента — это длина между значением первой цветовой остановки и значением длины последней цветовой остановки. Если первая цветовая остановка имеет только цвет и нет длины цветовой остановки, значение по умолчанию — 0. Если последняя цветовая остановка имеет только цвет и нет длины цветовой остановки, значение по умолчанию — 100%. Если ни то, ни другое не объявлено, линия градиента составляет 100%, что означает, что линейные и конические градиенты не будут повторяться, а радиальный градиент будет повторяться только если радиус градиента меньше длины между центром градиента и самым дальним углом. Если первая цветовая остановка объявлена и значение больше 0, градиент будет повторяться, так как размер линии или дуги — это разность между первой и последней цветовой остановкой меньше 100% или 360 градусов.

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

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

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

В этом случае линии градиента имеют длину 300 пикселей, 230 пикселей и 300 пикселей.

.multi-repeating-linear {
  background: repeating-linear-gradient(
      190deg,
      rgb(255 0 0 / 50%) 40px,
      rgb(255 153 0 / 50%) 80px,
      rgb(255 255 0 / 50%) 120px,
      rgb(0 255 0 / 50%) 160px,
      rgb(0 0 255 / 50%) 200px,
      rgb(75 0 130 / 50%) 240px,
      rgb(238 130 238 / 50%) 280px,
      rgb(255 0 0 / 50%) 300px
    ),
    repeating-linear-gradient(
      -190deg,
      rgb(255 0 0 / 50%) 30px,
      rgb(255 153 0 / 50%) 60px,
      rgb(255 255 0 / 50%) 90px,
      rgb(0 255 0 / 50%) 120px,
      rgb(0 0 255 / 50%) 150px,
      rgb(75 0 130 / 50%) 180px,
      rgb(238 130 238 / 50%) 210px,
      rgb(255 0 0 / 50%) 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,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    );

  background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    );
}

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

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

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

.repeating-conic {
  background: repeating-conic-gradient(
    #66ccff 0% 8.25%,
    #6633ff 8.25% 16.5%,
    #ff3399 16.5% 25%
  );
}

Так же, как и линейные и радиальные повторяющиеся градиенты, вы можете накладывать несколько конических градиентов друг на друга, создавая интересные эффекты, используя разные значения at <position>, чтобы конические градиенты не перекрывались в своих центрах, и разные значения from <angle>, чтобы повторяющиеся эффекты не совпадали. В этом примере перекрываются три полупрозрачных повторяющихся конических градиента, каждый из которых повторяет свои цветовые схемы четыре раза. Чтобы перекрывающиеся градиенты были видны, необходимо убедиться, что цвета градиентов, расположенных поверх стека, частично прозрачны, или использовать свойство CSS background-blend-mode.

.multi-repeating-conic {
  background: repeating-conic-gradient(
      from 0deg at 80% 50%,
      #5691f580 0% 8.25%,
      #b338ff80 8.25% 16.5%,
      #f8305880 16.5% 25%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      #e856f580 0% 8.25%,
      #ff384c80 8.25% 16.5%,
      #e7f83080 16.5% 25%
    ),
    repeating-conic-gradient(
      from 0deg at 20% 50%,
      #f58356ff 0% 8.25%,
      #caff38ff 8.25% 16.5%,
      #30f88aff 16.5% 25%
    );
}

• Функции градиента: linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()
• Типы данных CSS, относящиеся к градиентам: <gradient>, <image>
• Свойства CSS, относящиеся к градиентам: background, background-image
• Галерея узоров градиентов CSS, Lea Verou
• Библиотека градиентов CSS, Estelle Weyl
• Генератор CSS градиентов
• Расширенный генератор градиентов CSS