Генератор CSS-градиентов визуально создаёт линейные, радиальные и конические градиенты, чтобы вам больше никогда не пришлось вручную подбирать значение background-image. Выберите тип градиента, перетащите ползунок угла или центральную точку, а затем добавляйте, удаляйте или перекрашивайте сколько угодно цветовых точек с помощью встроенных выбора цвета и точных позиций в процентах. Панель предпросмотра обновляется мгновенно при любом изменении, а инструмент выдаёт готовую к копированию декларацию `background: ...;`, которую можно сразу вставить в таблицу стилей. Он создан для фронтенд-разработчиков и дизайнеров, которым нужно быстро набросать фон баннера, кнопки или карточки без открытия дизайнерского приложения. Всё выполняется локально в браузере, поэтому созданные вами градиенты никуда не отправляются.
Возможности
Линейный, радиальный и конический типы градиента в одном инструменте
Неограниченное число цветовых точек, каждая со своим цветовым пикером и позицией в процентах
Мгновенное добавление и удаление точек кнопками добавить/удалить
Ползунок и числовое поле угла для линейных и конических градиентов
Переключатель формы круг/эллипс и перетаскиваемый центр для радиальных градиентов
Панель предпросмотра обновляется при каждом изменении
Формирует готовую к копированию CSS-декларацию `background: ...;`
Полностью работает в браузере, ничего не отправляется на сервер
Как использовать Генератор CSS-градиентов
Выберите тип градиента: линейный, радиальный или конический
Настройте угол (линейный/конический) или форму и центр (радиальный)
Добавьте цветовые точки и настройте цвет и позицию в процентах для каждой
Скопируйте сгенерированный CSS background из панели кода
Линейный градиент из двух точек от красного к синему под углом 90 градусов.
Частые ошибки и устранение неполадок
Градиент выглядит плоским или показывает только один цвет. — Добавьте минимум две цветовые точки с разными позициями — одна точка или две точки в одной позиции не дадут видимого перехода.
Радиальный градиент отображается овалом, а не кругом. — Переключите форму на «Круг», либо оставьте «Эллипс», если хотите, чтобы градиент растягивался под соотношение сторон элемента.
Конический градиент начинается не с той точки. — Скорректируйте значение угла — конические градиенты вращают начальную точку по часовой стрелке от выбранного угла, начиная с 0deg, направленного вверх.
Между точками цвета выглядят полосами или мутными. — Добавьте промежуточную цветовую точку рядом с местом перехода, вместо того чтобы браузер интерполировал два очень разных оттенка на широком интервале.
Часто задаваемые вопросы
Что такое Генератор CSS-градиентов?
Это визуальный инструмент для создания линейных, радиальных и конических CSS-градиентов из цветовых точек, с предпросмотром в реальном времени и готовой к копированию декларацией background — без ручного написания синтаксиса градиента.
Может ли Генератор CSS-градиентов создавать не только линейные, но и радиальные и конические градиенты?
Да. Переключите сегментированный контрол на «Радиальный» для кругового или эллиптического градиента с перетаскиваемым центром, либо на «Конический» для градиента, вращающегося вокруг центра от выбранного начального угла.
Сколько цветовых точек можно добавить в генераторе градиентов?
Сколько угодно. Используйте кнопку «Добавить точку», чтобы создать новую, и кнопку удаления в любой строке, чтобы её убрать, при условии, что останется хотя бы одна точка.
Отправляет ли Генератор CSS-градиентов мои цвета куда-либо?
Нет. Генератор CSS-градиентов полностью работает в вашем браузере. Цвета, позиции и градиенты, которые вы создаёте, никогда не покидают ваше устройство.
Какой CSS выдаёт генератор градиентов?
Одну декларацию background, например background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, готовую для вставки в таблицу стилей, атрибут style или шаблон CSS-in-JS.
Можно ли задать точную позицию центра для радиального или конического градиента?
Да. Ползунки Center X и Center Y позволяют перемещать точку начала градиента в диапазоне от 0% до 100% элемента по каждому направлению.
Связанные инструменты
Конвертер цветов CSS — Преобразуйте между HEX, RGB и HSL с живым образцом цвета.