Как это работает
Выберите тип градиента, угол и два или три цвета с их позициями. Предпросмотр обновляется мгновенно, и вы получаете готовый к вставке CSS плюс PNG 1920 × 1080 для слайдов, обоев и постов.
background: linear-gradient(135deg, #6cc04a 0%, #f2b33d 100%);
Типы градиентов
- Линейный: цвета смешиваются вдоль прямой линии под заданным углом (0° = снизу вверх, 90° = слева направо).
- Радиальный: цвета расходятся из центра кругом.
- Конический: цвета обходят центр, как цветовое колесо или круговая диаграмма.
Советы
- Близкие цвета на цветовом круге смешиваются плавнее, чем противоположные.
- Проверяйте контраст текста на градиенте с обоих концов, чтобы он оставался читаемым.
- Все современные браузеры поддерживают эти CSS-градиенты без префиксов.
Стандарты и источники
- Синтаксис градиентов соответствует CSS Images Module Level 3 и 4 (W3C)
Last reviewed 7 октября 2026 г.
Часто задаваемые вопросы
Как сделать CSS-градиент?
Выберите тип, задайте угол и цвета, затем скопируйте сгенерированную строку «background» в свою таблицу стилей.
Что означает угол?
Для линейных градиентов 0° идёт снизу вверх, 90° слева направо и 180° сверху вниз.
Можно ли использовать больше двух цветов?
Да. Отметьте «Добавить средний цвет», чтобы добавить третью цветовую точку с собственной позицией.
Можно ли скачать градиент как изображение?
Да. «Скачать PNG» сохраняет изображение 1920 × 1080, готовое для слайдов, обоев или соцсетей.
Работают ли эти градиенты во всех браузерах?
Линейные и радиальные градиенты работают везде; конические градиенты работают во всех текущих версиях Chrome, Edge, Firefox и Safari.