Генератор CSS-градиентов

Градиенты — это изображения, а не цвета

CSS-градиент создаётся функциями linear-gradient, radial-gradient или conic-gradient, и каждая из них порождает значение-изображение, а не цвет. Один этот факт объясняет большую часть поведения градиентов. Поскольку результат — это изображение, вы присваиваете его свойству, которое принимает изображения, чаще всего background или background-image, и он замощается, масштабируется и накладывается так же, как любой другой фон. У него также нет собственного размера; он заполняет тот блок, в который вы его поместили, и именно поэтому один и тот же градиент может выглядеть крутым на кнопке и плавным поперёк секции-героя.

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

Линейный градиент смешивает цвета вдоль прямой оси. Эту ось вы задаёте либо углом, либо ключевым направлением. Углы отсчитываются по часовой стрелке от направления прямо вверх, поэтому 0deg идёт снизу вверх, 90deg — слева направо, а 180deg — сверху вниз. Ключевые формы, такие как to right или to bottom right, часто понятнее для простых случаев и имеют тот плюс, что точно указывают на угол, чего фиксированный угол не может, когда форма блока меняется.

Ползунок угла в этом инструменте записывает значение в градусах за вас. Тонкий совет: градиент, идущий под небольшим наклоном, где-то около 135deg, почти всегда выглядит изысканнее, чем плоский вертикальный или горизонтальный переход, потому что глаз воспринимает диагональ как свет, скользящий по поверхности.

Радиальные и конические градиенты

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

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

Цветовые точки и положения

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

Положения не обязаны нарастать плавно, и вот тут градиенты становятся интересными. Сближение двух точек создаёт быстрый переход, а их разведение — медленный и плавный. Можно даже задать двум точкам одно и то же положение, чтобы полностью убрать переход, и это ключ к следующему приёму.

Жёсткие переходы: полосы, ленты и фигуры

Когда две соседние цветовые точки имеют одно и то же положение, переход между ними происходит на нулевом расстоянии, давая чёткую границу вместо перетекания. Повторите этот узор — и вы получите полоски, шахматные клетки, индикаторы прогресса и цветовые ленты-коды, нарисованные целиком на CSS без изображений. Например, градиент, который держит один цвет от 0 до 50 процентов, а второй цвет — от 50 до 100 процентов, даёт чистое двухцветное разделение посередине.

Соедините жёсткие переходы с repeating-linear-gradient или repeating-radial-gradient — и узор автоматически замостит блок, так что можно собрать леденцовые полоски, диагональную предупреждающую ленту или тонкие направляющие линии из одного короткого объявления. Поскольку это векторная математика, а не растр, он остаётся идеально чётким при любом размере и любой плотности пикселей.

Прозрачность и наложение

Точки градиента могут использовать цвета с альфа-каналом, и затухание до полностью прозрачного цвета — один из самых полезных приёмов, которые вы можете применить. Градиент, идущий от сплошного цвета к прозрачному, создаёт ту затемняющую подложку, которую вы видите за текстом внизу фотографии, плавное угасание у края прокручиваемого списка и мягкие маски изображений. Одна оговорка: при некоторых интерполяциях цвета затухание до чистого прозрачного может проходить через тусклую серую середину, поэтому затухание к тому же цвету при нулевой альфе, а не к голому ключевому слову transparent, даёт более чистый результат.

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

Доступность: текст поверх градиентов

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