Генератор CSS-градиентов
Создайте линейный, радиальный или конический градиент, наблюдайте за изменениями в реальном времени и скопируйте правило CSS background.
Работает полностью в браузере
Опорные цвета
Готовые образцы
Цвета опорных точек могут быть любыми, которые понимает ваш браузер (HEX, названия, rgb(), hsl(), oklch()). До 10 опорных точек. Положения задаются в процентах; результат — обычный CSS без вендорных префиксов.
Как создать CSS-градиент
- Выберите Линейный, Радиальный или Конический либо начните с готового образца.
- Задайте угол или положение, затем отредактируйте опорные цвета: измените цвет и положение каждого, добавьте точки и перемещайте их вверх или вниз.
- Нажмите Копировать CSS и вставьте правило в таблицу стилей. Отметьте запасной вариант, если нужна строка с однотонным цветом перед ним.
Как читать CSS-градиент
CSS-градиент — это изображение, которое браузер рисует сам, поэтому оно масштабируется до любого размера и не требует загрузки. Линейный градиент смешивает цвета вдоль линии, заданной углом. Радиальный градиент расходится от центральной точки кругом или эллипсом. Конический градиент разворачивает цвета вокруг центра, как стрелка часов, что делает его естественным выбором для круговых диаграмм и цветовых кругов.
Каждая опорная точка — это цвет плюс положение вдоль линии градиента в процентах. Между двумя точками браузер плавно смешивает цвета. Если у двух точек одинаковое положение, у перехода нет ширины, и получается резкая граница. Если точка стоит раньше предыдущей, браузеры считают, что она находится в положении предыдущей, поэтому инструмент позволяет менять порядок точек и сортировать их.
Правило записывается как background:, так что работает на любом элементе. Градиенты рисуются на фоне, поэтому для текста поверх них нужна та же забота о контрасте, что и для текста на однотонном цвете: проверяйте самые светлые и самые тёмные участки перехода по отдельности.
Советы
- Подберите сочетающиеся цвета опорных точек в «Генераторе цветовых палитр».
- Переведите цвет точки между HEX, RGB и HSL в «Конвертере цветов и проверке контрастности».
- Публикуете таблицу стилей? Уменьшите её в «Минификации и форматировании CSS».
Вопросы и ответы
Что означает угол в линейном градиенте?
0deg направлен вверх, поэтому градиент идёт от нижнего края вверх. 90deg идёт слева направо, 180deg — сверху вниз, 270deg — справа налево. 360deg — то же направление, что и 0deg. Инструмент записывает введённое число с единицей deg.
Как получить резкую границу вместо плавного перехода?
Задайте двум соседним опорным точкам одинаковое положение. Например, красный на 50 %, за которым идёт синий на 50 %, меняет цвет ровно на середине без перехода. Это показывает образец «Резкие полосы».
Что делает параметр «Повторяющийся»?
Он записывает repeating-linear-gradient, repeating-radial-gradient или repeating-conic-gradient. Узор между первой и последней опорными точками тиражируется, поэтому он виден, только если последняя точка находится раньше 100 %. Попробуйте точки на 0 %, 10 % и 20 %, чтобы получить полосы.
Для чего нужна строка с запасным однотонным цветом?
Браузер, который не может прочитать градиент, пропускает эту строку и оставляет предыдущую. Браузеры с поддержкой градиентов, а это почти все используемые, переопределяют её. Запасной цвет — это цвет вашей первой опорной точки.
Какие форматы цвета принимаются?
Всё, что принимает свойство CSS color в вашем браузере: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) или oklch(0.5 0.2 260). Если ввести что-то другое, появится сообщение, а на экране останется последний корректный градиент.
Нужно ли коническому градиенту положение?
У него всегда есть центр, и этот инструмент записывает его в процентах, так что 50% 50% — середина блока. Начальный угол поворачивает место, с которого начинается цветовой обход, отсчитываемый по часовой стрелке от верха.