Прогрессивные градиенты CSS

Градиентный фон

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

CSS определяет два типа градиентов:

  • Линейный градиент((вниз/вверх/влево/вправо/диагонально))
  • Радиальный градиент((определенный его центром))

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

Чтобы создать линейный градиент, вам необходимо определить по крайней мере два цветовых маркера. Цветовые маркеры - это цвета, которые вы хотите呈现平滑过渡. Вы также можете установить точку начала и направление (или угол) и эффект градиента.

синтаксис

background-image: linear-gradient(направление, color-stop1, color-stop2, ...);

Линейный градиент - сверху вниз (по умолчанию)

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

Сверху вниз (по умолчанию)

Пример

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

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

Линейный градиент - слева направо

Ниже приведен пример линейного градиента, начинающегося слева. Он начинается с красного и过渡ит к желтому:

С лева направо

Пример

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

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

Линейный градиент - диагональ

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

Ниже приведен пример линейного градиента, начинающегося от верхнего левого угла (до нижнего правого угла). Он начинается с красного и过渡ит к желтому:

Сверху слева до снизу справа

Пример

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

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

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

Если вы хотите получить более точный контроль над углом градиента, вы можете определить угол, чтобы заменить预定ные направления (вниз, вверх, вправо, влево, вниз-вправо и т.д.). Значение 0deg равно 'вверх' (to top). Значение 90deg равно 'вправо' (to right). Значение 180deg равно 'вниз' (to bottom).

180deg

синтаксис

background-image: linear-gradient(angle, color-stop1, color-stop2);

Этот угол определяет угол между горизонтальной линией и линией градиента.

Ниже приведен пример того, как использовать угол для линейного градиента:

Пример

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

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

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

Ниже приведен пример линейного градиента с несколькими цветными маркерами (сверху вниз):

Пример

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

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

Ниже приведен пример того, как использовать радужные цвета и текст для создания линейного градиента (с лева направо):

Градиентный фон

Пример

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

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

Использование прозрачности

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

Чтобы добавить прозрачность, мы используем функцию rgba(). Последний параметр функции rgba() может быть значением от 0 до 1 и определяет прозрачность цвета: 0 означает полностью прозрачный, 1 означает полностью цветной (без прозрачности).

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

Пример

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

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

Повторяющийся линейный градиент

repeating-linear-gradient() Функция для повторяющегося линейного градиента:

Пример

Повторяющийся линейный градиент:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

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