Генератор CSS-градиентов
Настройте градиент визуально и скопируйте CSS, который работает во всех современных браузерах.
Запечатано на этом устройстве
Работает в вашем браузере. Ничего не загружается на сервер.
Запечатано
Превью
Цветовые точки
Перетаскивайте точки или выберите одну и используйте стрелки. Нажмите на полосу, чтобы добавить точку.
Настройки
OKLCH и OKLab избегают тусклой серой зоны в середине некоторых градиентов. Для старых браузеров добавляется стандартный вариант.
CSS-код
Как это работает
-
Выберите тип
Выберите линейный, радиальный или конический градиент либо начните с пресета и задайте угол или центр.
-
Настройте цвета
Перетаскивайте цветовые точки по полосе, нажимайте на полосу, чтобы добавить новые, и меняйте цвет и позицию каждой точки.
-
Скопируйте CSS
Скопируйте готовый код и вставьте его в таблицу стилей как фон.
Частые вопросы
Чем отличаются линейный, радиальный и конический градиенты?
Линейный градиент меняет цвет вдоль прямой линии под выбранным углом. Радиальный расходится от центральной точки кругом или эллипсом. Конический обходит центральную точку по кругу, как стрелки часов, — это удобно для цветовых кругов и круговых диаграмм.
Работает ли сгенерированный CSS во всех браузерах?
Линейные, радиальные и конические градиенты работают во всех современных браузерах. Если выбрать смешивание OKLCH или OKLab, код также начинается со стандартной строки, чтобы старые браузеры всё равно показали градиент.
Почему градиент выглядит серым посередине?
При смешивании двух очень разных цветов в стандартном пространстве sRGB переход часто проходит через грязно-серый. Переключите смешивание на OKLCH или OKLab: цвета смешиваются так, как их воспринимает глаз, и середина остаётся яркой.
Можно ли использовать прозрачные цвета?
Да. Введите цвет с прозрачностью, например rgb(52 66 217 / 0.4) или #3442d966, в поле цвета точки. Это отлично подходит для наложений поверх изображений.
Сколько цветовых точек можно добавить?
Сколько нужно. Каждую точку можно перемещать мышью, касанием или стрелками и удалять, пока остаются хотя бы две точки.