CSS: Линейный градиент для фона

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

Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги - подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

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

Линейный градиент (Linear Gradient) - плавный переход от цвета к цвету по прямой линии.
Радиальный градиент (Radial Gradient) - плавный переход от цвета к цвету из одной точки во все направления.

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

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

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

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

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

div {
  background-image: linear-gradient(black, white);
  width: 200px;
  height: 200px;
}

Попробовать »

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

Направление линии градиента может быть определено двумя способами:

Использование градусов: В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree - градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов.
Использование ключевых слов: В качестве первого аргумента могут также передаваться ключевые слова "to top", "to right", "to bottom" или "to left", они представляют собой углы линий градиентов "0deg" "90deg" "180deg" "270deg" соответственно.

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

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

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to left, black, red); }
#two { background-image: linear-gradient(to top left, black, red); }
#three { background-image: linear-gradient(65deg, black, yellow); }

Попробовать »

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

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to right, red, blue, yellow); }
#two { background-image: linear-gradient(to top left, blue, white, blue); }

Попробовать »

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% - конечной.

div { 
  margin: 10px;
  width: 200px;
  height: 200px;
  float: left;
}
#one { background-image: linear-gradient(to top right, blue, white 70%, blue); }
#two { background-image: linear-gradient(to right bottom, yellow 10%, white, red, black 90%);}
#three { background-image: linear-gradient(to right, black 10%, yellow, black 90%); }

Попробовать »

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

div { 
  margin: 10px;
  width: 300px;
  height: 100px;
  background-color: green;
}
#one { background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); }
#two { background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); }

Попробовать »