Генератор CSS градиентов
Создавайте линейные, радиальные и конические CSS градиенты с любым количеством цветовых точек. Живой предпросмотр, готовые наборы и случайные идеи, экспорт в CSS, SCSS, SVG или PNG.
Загрузка: Генератор CSS градиентов…
Ваши файлы не покидают устройство
Как пользоваться: Генератор CSS градиентов
- 1
Откройте «Генератор CSS градиентов» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Этот генератор CSS градиентов позволяет наглядно создавать градиентные фоны и копировать код. Выберите тип градиента, добавьте цвета, перетащите точки на нужные места и задайте угол: живой предпросмотр и CSS обновляются по ходу работы. Когда результат понравится, скопируйте CSS или экспортируйте его в SCSS, SVG или PNG.
Как сделать градиент
- Выберите линейный, радиальный или конический.
- Задайте цвета и добавьте столько цветовых точек, сколько нужно.
- Перетаскивайте точки или вводите точное положение в процентах.
- Для линейных и конических градиентов задайте угол (90° идёт слева направо, 180° сверху вниз).
- Скопируйте готовый код или экспортируйте его.
Нет идей? Начните с готового набора или нажмите Random для новой случайной комбинации и сохраняйте понравившиеся градиенты на потом.
Типы градиентов
- Линейный: цвета смешиваются вдоль прямой под заданным углом.
linear-gradient(90deg, #6366f1, #ec4899) - Радиальный: цвета расходятся от центральной точки кругом или эллипсом.
radial-gradient(circle, #fde68a, #f97316) - Конический: цвета вращаются вокруг центра, как цветовой круг или круговая диаграмма.
conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)
Форматы экспорта
- CSS: готовое свойство background для вставки.
- SCSS: градиент в виде переменной для таблицы стилей.
- SVG: векторный файл для программ дизайна и иллюстраций.
- Изображение PNG: для мест, где CSS не принимается, например слайдов и постов в соцсетях.
Советы для красивых градиентов
- Используйте соседние цвета для мягких переходов. Противоположные цвета, например красный и зелёный, могут дать грязно-серый цвет в середине; добавьте промежуточную точку.
- Сохраняйте читаемость текста: проверьте контраст в самой светлой и самой тёмной части под текстом.
- Резкие переходы: поставьте две точки в одно положение, чтобы получить чёткую границу, это удобно для полос.
- Сдержанность выглядит профессионально: два близких оттенка одного цвета смотрятся спокойнее радуги.
Все современные браузеры поддерживают линейные, радиальные и конические градиенты без префиксов. Собираете целую цветовую схему? Используйте генератор цветовых палитр и добавьте глубину с помощью генератора теней CSS.
Частые вопросы
Как создать CSS градиент?
Выберите тип, минимум два цвета, настройте точки и угол и скопируйте готовый CSS в таблицу стилей как фон.
Чем отличаются линейный, радиальный и конический градиенты?
Линейный смешивает цвета вдоль прямой, радиальный расходится от центральной точки, а конический вращает цвета вокруг центра, как цветовой круг.
Как сделать градиент с резкой границей?
Поставьте две цветовые точки в одно и то же положение. Тогда цвета сменятся мгновенно, а не плавно.
Можно ли скачать градиент как картинку?
Да. Экспортируйте его в PNG или в SVG, если нужен векторный файл.
Работают ли CSS градиенты во всех браузерах?
Да. Линейные, радиальные и конические градиенты поддерживаются всеми актуальными версиями Chrome, Edge, Firefox и Safari без префиксов.
Можно ли сохранять градиенты?
Да. Сохраняйте любимые градиенты и открывайте их позже в том же браузере.