Функция CSS `linear-gradient()`

linear-gradient() CSS функция создаёт изображение, состоящее из плавного перехода между двумя или более цветами вдоль прямой линии. Её результат — объект типа данных <gradient>, представляющего собой особый вид <image>.

Попробуйте

background: linear-gradient(#e66465, #9198e5);

background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(
  to left,
  #333333,
  #333333 50%,
  #eeeeee 75%,
  #333333 75%
);

background:
  linear-gradient(217deg, rgb(255 0 0 / 0.8), transparent 70.71%),
  linear-gradient(127deg, rgb(0 255 0 / 0.8), transparent 70.71%),
  linear-gradient(336deg, rgb(0 0 255 / 0.8), transparent 70.71%);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Синтаксис

/* A gradient with a single color of red */
linear-gradient(red)

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red)

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red)

/* Interpolation in rectangular color space */
linear-gradient(in oklab, blue, red)

/* Interpolation in polar color space */
linear-gradient(in hsl, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
linear-gradient(in hsl longer hue, blue, red)

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red)

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue)

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%)

Значения

<side-or-corner>

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

Значения to top, to bottom, to left и to right эквивалентны углам 0deg, 180deg, 270deg и 90deg соответственно. Остальные значения преобразуются в угол.

<angle>

Угол направления линии градиента. Значение 0deg эквивалентно to top; при увеличении значений происходит поворот по часовой стрелке.

<linear-color-stop>

Значение color цветовой точки, за которым следуют одна или две необязательные позиции этой точки (каждая из которых задаётся как <percentage> или <length> вдоль оси градиента).

<color-hint>

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

Описание

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

Чтобы создать линейный градиент, который повторяется и заполняет контейнер, используйте функцию repeating-linear-gradient().

Поскольку <gradient>ы относятся к типу данных <image>, их можно использовать только там, где допустимы <image>ы. Поэтому linear-gradient() не будет работать со свойством background-color и другими свойствами, использующими тип данных color.

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

Линейный градиент определяется осью — линией градиента — и двумя или более точками цветовых переходов. Каждая точка на оси имеет свой цвет; чтобы создать плавный градиент, функция linear-gradient() рисует ряд цветных линий, перпендикулярных линии градиента, каждая из которых соответствует цвету точки пересечения с линией градиента.

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

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

Настройка градиентов

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

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

По умолчанию цвета плавно переходят от цвета одной цветовой точки к цвету следующей, а середина перехода находится ровно посередине между цветами. Можно переместить эту середину в любое место между двумя цветовыми точками, добавив между цветами неподписанную подсказку в процентах, которая указывает положение середины цветового перехода. В следующем примере от начала до отметки 10% отображается сплошной красный цвет, а от 90% до конца — сплошной синий. На участке от 10% до 90% красный цвет переходит в синий, однако середина перехода находится на отметке 30%, а не 50%, как было бы без подсказки цвета 30%.

linear-gradient(red 10%, 30%, blue 90%);

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

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

linear-gradient(red 40%, yellow 30%, blue 65%);

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

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

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

Формальный синтаксис

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )

<linear-gradient-syntax> = 
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>

<side-or-corner> = 
  [ left | right ] ||
  [ top | bottom ]

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<linear-color-stop> = 
  <color> <color-stop-length>?

<linear-color-hint> = 
  <length-percentage>

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-stop-length> = 
  <length-percentage>{1,2}

<length-percentage> = 
  <length> |
  <percentage>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

Градиент под углом 45 градусов

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(45deg, red, blue);
}

Градиент, начинающийся на отметке 60% линии градиента

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

Интерполяция в прямоугольном цветовом пространстве

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(90deg in oklab, blue, red);
}

Интерполяция с использованием тона

<div class="shorter">shorter hue</div>
<div class="longer">longer hue</div>

div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}

В этом примере интерполяции используется цветовая система hsl и интерполируется тон.

.shorter {
  background: linear-gradient(90deg in hsl shorter hue, red, blue);
}

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

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

Градиент с цветовыми точками, имеющими несколько позиций

В этом примере используются цветовые точки с несколькими позициями: соседним цветам присвоено одинаковое значение цветовой точки, что создаёт эффект полос.

body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

Другие примеры linear-gradient

Другие примеры см. в статье Использование градиентов CSS.

Спецификации

Совместимость с браузерами

См. также

• Использование градиентов CSS
• Другие функции градиентов: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• Модуль изображений CSS