Писать синтаксис градиента вручную неудобно: угол, порядок точек и проценты позиций взаимосвязаны, и одна опечатка молча ломает весь background. Этот генератор держит предпросмотр и код в полной синхронности - что видите, то и получаете при копировании, байт в байт. Всё считается на стороне браузера, поэтому ничего из того, что вы создаёте, никуда не отправляется.
Бесплатный генератор градиентов CSS
Работает прямо в браузере - без загрузки файлов и регистрации.
Тип
Цветовые точки
Код CSS
Что такое генератор градиентов CSS?
Генератор градиентов css - визуальный инструмент, который сам собирает код linear-gradient(), radial-gradient() или conic-gradient(). Выбираете цвета, перетаскиваете точки остановки, задаёте угол - и получаете готовый к вставке CSS, а предпросмотр сразу показывает, как это отрисует браузер. Всё работает прямо в браузере.
Как пользоваться
- 1Выберите тип градиента. Линейный, радиальный или конический. У линейного есть слайдер угла, у радиального - форма (круг или эллипс) и позиция, у конического - начальный угол и позиция.
- 2Настройте цветовые точки. Кликните по образцу, чтобы выбрать цвет, и перетащите слайдер, чтобы сдвинуть точку вдоль градиента. Можно добавить до 8 точек или убрать до 2.
- 3Настройте направление. Перетащите слайдер угла (0-360 градусов) или выберите позицию из списка. Предпросмотр обновляется мгновенно при каждом изменении.
- 4Скопируйте CSS. Нажмите «Копировать», чтобы получить объявление background вместе со сплошным запасным цветом, и вставьте его в свою таблицу стилей.
Кому пригодится
- Фронтенд-разработчикам, которым нужен фон для хиро-блока, карточки или кнопки - без необходимости помнить синтаксис
linear-gradient(). - Веб- и UI-дизайнерам, повторяющим макет: собрать градиент визуально и сразу передать готовый CSS команде разработки.
- Создателям писем и лендингов, которым нужен запасной сплошной цвет для старых почтовых клиентов - он добавляется автоматически.
- Студентам, изучающим CSS, которые хотят увидеть в реальном времени, как угол, цветовые точки и тип градиента меняют результат.
Вопросы и ответы
Этот генератор градиентов CSS бесплатный?
Да - полностью бесплатно, без регистрации, без водяных знаков и без ограничений. Создавайте сколько угодно градиентов и вставляйте CSS прямо в проект.
Данные отправляются на сервер?
Нет. Градиент собирается и отображается полностью в браузере на обычном JavaScript. Ни цвета, ни код, ни данные использования никуда не передаются.
В чём разница между линейным, радиальным и коническим градиентом?
Линейный градиент смешивает цвета вдоль прямой линии под выбранным углом. Радиальный расходится от центральной точки кругом или эллипсом. Конический разворачивает цвета вокруг центра - как цветовой круг или диаграмма.
Как работают цветовые точки в градиентах CSS?
Каждая точка задаёт цвет и позицию от 0% до 100% вдоль линии градиента. Браузер плавно смешивает соседние точки. Если поставить две точки в одной позиции, получится резкая граница вместо плавного перехода - удобно для полос и эффекта диаграммы.
Какие браузеры поддерживают такие градиенты?
Все современные браузеры - Chrome, Firefox, Safari и Edge - поддерживают linear-gradient() и radial-gradient() без префиксов; conic-gradient() поддерживается повсеместно с 2020 года. В скопированный код также добавлен запасной сплошной цвет для старых версий.
Можно ли применить градиент к цвету текста?
Не напрямую - градиенты это изображения, а не цвета. Задайте градиент как background-image для текстового элемента, затем добавьте background-clip: text и color: transparent, чтобы градиент проступал сквозь буквы.
Почему на градиенте видны полосы?
Полосы (бандинг) появляются, когда две далёкие точки смешиваются на большом расстоянии близких оттенков, обнажая 8-битные шаги цвета. Уменьшить их можно, добавив промежуточную точку, сократив дистанцию перехода или выбрав цвета, различающиеся не только оттенком, но и светлотой.