DevToolPal
RU

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

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

Работает локально, без загрузки на сервер

Градиент

Тип
Точки цвета

Предпросмотр

CSS

Пресеты
CSS градиента
 
 
 
 
 
Что умеет инструмент


Генератор CSS-градиентов позволяет подобрать градиент на глаз и скопировать готовый CSS. Выберите линейный, радиальный или конический градиент, добавьте сколько угодно точек цвета, перетащите их, задайте угол или центр — предпросмотр обновится сразу. Можно также вставить существующий linear-gradient(…), radial-gradient(…) или conic-gradient(…) и редактировать его визуально. Всё работает в браузере.


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


    

  1. Начните с пресета или оставьте градиент из примера.
    2. 

  2. Выберите Тип. У линейного и конического градиентов есть угол; у радиального и конического — центр, который двигается ползунками Центр X и Центр Y.
    3. 

  3. Редактируйте Точки цвета: меняйте цвет в палитре или вводите любой CSS-цвет, перетаскивайте Положение, кнопкой + Добавить точку вставляйте точку в самый большой промежуток, а Развернуть меняет порядок на обратный.
    4. 

  4. Включите Повторять, чтобы градиент повторялся и получались полосы и кольца.
    5. 

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



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


Пример


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Советы для красивых градиентов


    

  • Сдержанность. Соседние оттенки (синий в фиолетовый, оранжевый в розовый) смотрятся мягче противоположных цветов, которые в середине могут дать грязно-серый.
    • 

  • Добавьте промежуточную точку, чтобы управлять смешиванием. Третья точка чуть светлее соседних даёт мягкий блик.
    • 

  • Жёсткие точки рисуют формы. Точки в одном положении дают резкие границы — на этом построены полосы, флаги, индикаторы прогресса и круговые диаграммы.
    • 

  • Направления. to right равно 90deg, а to bottom (по умолчанию) — 180deg. Углы отсчитываются по часовой стрелке от верха.
    • 

  • Текст на градиенте должен читаться по всей его длине. Сравните самую светлую и самую тёмную точку с цветом текста в проверке контрастности.
    • 

 
  
 
Частые вопросы
 
 
  › Чем отличаются линейный, радиальный и конический градиенты?  
Линейный градиент смешивает цвета вдоль прямой под заданным углом. Радиальный расходится от центральной точки кругом или эллипсом. Конический вращается вокруг центра, как стрелки часов, и подходит для цветовых кругов и круговых диаграмм.
 
  › Как сделать чёткие полосы вместо плавного перехода?  
Поставьте две соседние точки в одно положение, например red 50% и blue 50%. Цвет сменится в этом месте мгновенно. Включите «Повторять», чтобы узор повторялся, — так в CSS делают полосы.
 
  › Можно использовать полупрозрачные цвета?  
Да. В точку можно ввести любой CSS-цвет, включая rgba(), hsl() с альфа-каналом, 8-значный hex или transparent. Палитра сохраняет заданную прозрачность, а предпросмотр показывает шахматный фон под прозрачными участками.
 
  › Нужны ли ещё вендорные префиксы или запасной цвет?  
Префиксы не нужны: все современные браузеры поддерживают линейные, радиальные и конические градиенты без префиксов. Необязательный запасной сплошной цвет важен только для очень старых браузеров или программ, читающих background-color, например некоторых почтовых клиентов.