Для разработчиков / CSS

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

Создайте линейный, радиальный или конический градиент с предпросмотром, нужным количеством цветовых точек и пресетами, а затем скопируйте CSS.

Генератор CSS-градиентов: Генератор создаёт объявление background, необходимое браузеру для отображения выбранного градиента: linear-gradient с углом, radial-gradient с окружностью или эллипсом из центра либо conic-gradient, который разворачивается вокруг начального угла. Цветовые точки добавляются по порядку. В первой строке указывается сплошной цвет как запасной вариант для слишком старых браузеров, не умеющих отображать градиенты. Новый цвет добавляется в самый широкий промежуток и смешивается с соседними, поэтому градиент не прерывается резким переходом. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория: Инструменты для разработчиков
Запуски: В вашем браузере
Стоимость: Бесплатно · без регистрации
Доступность: Готово к использованию

Генератор градиентов CSSЛокальная обработка

Полностью работает в браузере

Угол135°

Цветовые точки

#ff7e5f0%

#feb47b100%

CSS

background: #ff7e5f;
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);

Первая строка задаёт сплошной цвет для очень старых браузеров; все современные браузеры используют градиент из второй строки.

Предустановки

Плавные градиенты

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

Выберите или проверьте цвета с помощью конвертера цветов, а добавьте карточке объём с помощью генератора теней.

Текст на градиенте

Проверьте, что текст остаётся читаемым на обоих концах градиента, а не только посередине. Более безопасный вариант — тёмный градиент с белым текстом или ненавязчивый градиент под тёмным текстом, а не яркая радуга.

Как пользоваться

Выберите пресет или тип градиента: линейный, радиальный или конический.
Задайте угол, настройте цвета и их позиции; добавьте цвет, чтобы использовать больше точек.
Скопируйте CSS в таблицу стилей.

Конфиденциальность и ограничения

Всё работает в вашем браузере; последний градиент сохраняется только в этом браузере.

Часто задаваемые вопросы

Что означает угол в линейном градиенте?

0deg задаёт направление снизу вверх, 90deg — слева направо, 180deg — сверху вниз, а 270deg — справа налево. Градиент строится вдоль этого направления, поэтому 135deg направляет его от верхнего левого угла к нижнему правому.

Что такое цветовая точка?

Это цвет и позиция от 0% до 100% вдоль градиента, в которой он достигается точно. Между двумя точками цвета смешиваются. Если указать две точки в одной позиции, вместо смешивания получится резкая граница — так создаются полосы.

Чем конический градиент отличается от радиального?

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

Нужны ли мне по-прежнему префиксы -webkit-?

Нет. Все актуальные браузеры поддерживают linear-gradient и radial-gradient без префикса, а conic-gradient работает во всех них с 2021 года. Запасной цвет в первой строке нужен только для очень старых браузеров.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен

CSS