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

Определение и использование

CSS linear-gradient() Функция используется для создания линейной градиентной заливки в качестве фона.

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

Примеры линейных градиентных заливок:

Пример

Пример 1

Эта линейная градиентная заливка начинается с верха. Она переходит от красного к желтому, а затем к синему:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Попробуйте сами

Пример 2

Линейная градиентная заливка, начинающаяся с левого края. Она переходит от красного к синему:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Попробуйте сами

Пример 3

Линейная градиентная заливка, начинающаяся с верхнего левого угла (и продолжающаяся до нижнего правого угла):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Попробуйте сами

Пример 4

Линейная градиентная заливка с указанным углом:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Попробуйте сами

Пример 5

Линейная градиентная заливка, содержащая несколько цветовых маркеров:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Попробуйте сами

Пример 6

Линейный градиент с двумя местами для цветовых меток:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Попробуйте сами

Пример 7

Линейный градиент с прозрачностью:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Попробуйте сами

Грамматика CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Технические детали

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

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Соответствующие страницы

Учебник:CSS градиент

См. также:Свойство background-image CSS

См. также:Функция CSS conic-gradient()

См. также:Функция CSS radial-gradient()

См. также:Функция CSS repeating-conic-gradient()

См. также:Функция CSS repeating-linear-gradient()

См. также:Функция repeating-radial-gradient() в CSS