Об этом инструменте
CSS-градиент — это изображение, генерируемое браузером, которое плавно переходит между двумя или более цветами и объявляется с помощью функций linear-gradient(), radial-gradient() или conic-gradient(). Каждая цветовая точка связывает цвет с необязательной позицией (процент вдоль линии или дуги градиента), а линейные и конические градиенты добавляют угол, задающий направление перехода, тогда как радиальные градиенты принимают форму (круг или эллипс) и позицию для своего начала.
Используйте его, чтобы оформлять фоны героев, заливки кнопок, наложения карточек и акценты разделителей без ручной настройки синтаксиса: выберите тип, перетащите угол, добавьте до шести точек и скопируйте готовое к вставке объявление background. Предпросмотр размещается на шахматном фоне, чтобы вы могли видеть, как накладываются полупрозрачные точки, а предустановки дают вам проверенные палитры из двух и трёх точек для начала.
Градиенты отображаются как CSS-изображения, поэтому у них нет собственного размера — задайте ширину и высоту (или используйте их как фон), иначе элемент схлопнется, и вы ничего не увидите.
Часто задаваемые вопросы
В чём разница между линейными, радиальными и коническими градиентами в CSS?
Линейный градиент переводит цвета вдоль прямой линии под заданным углом, радиальный градиент расходится наружу от центральной точки в виде круга или эллипса, а конический градиент разворачивает цвета вокруг центральной точки, как стрелки часов, поэтому его часто используют для цветовых кругов и эффектов круговых диаграмм.
Как работают углы CSS-градиентов?
Для linear-gradient() угол 0deg направляет градиент прямо вверх (к верху), 90deg — вправо, 180deg — вниз, а 270deg — влево, возрастая по часовой стрелке. Для conic-gradient() значение from <angle> просто поворачивает начальную позицию разворота цветов вокруг центра.
Можно ли использовать более двух цветов в CSS-градиенте?
Да. Градиент принимает любое количество цветовых точек, разделённых запятыми, каждой из которых может быть задана необязательная позиция, например #f00 0%, #ff0 50%, #00f 100%. Точки размещаются в том порядке, в котором вы их записываете, и этот генератор поддерживает до шести.