Skip to content
Zoyku

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

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

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Инструмент полностью работает в вашем браузере. Данные не покидают устройство и не загружаются ни на один сервер.

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

  1. 1Задайте от двух до пяти цветов или начните с готовой палитры.
  2. 2Выберите тип градиента, затем угол или форму; при желании зафиксируйте позиции.
  3. 3Скопируйте CSS-блок и вставьте его в свою таблицу стилей.

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

Выберите от двух до пяти цветов, переключитесь на линейный, радиальный или конический тип и потяните угол — предпросмотр обновляется на лету, а CSS всегда в одном клике от копирования. Оставьте позицию цветовой точки пустой — она расставится автоматически, как это сделал бы CSS; точные проценты дают резкие границы и смещённые переходы.

На выходе — настоящий производственный блок: строка сплошного цвета-запаски для старых браузеров, строка с префиксом -webkit- для старых движков WebKit и стандартный синтаксис последней. Кнопка случайной гармонизации вращает оттенки палитры в пространстве HSL, поэтому каждая перетасовка остаётся сбалансированной.

Частые вопросы

Зачем в CSS строка с префиксом -webkit-?

Это строка совместимости для старых движков WebKit (примерно эпохи Safari 5–6), которые понимали только -webkit-linear-gradient. Все браузеры последнего десятилетия читают стандартную строку, так что префиксную можно удалить, если эти версии не нужны — хранить её стоит одну строку, а удалить ничего не стоит.

Что означает угол в линейном градиенте?

Это направление движения градиента, отсчитываемое по часовой стрелке от верха: 0deg идёт снизу вверх, 90deg — слева направо, 180deg — сверху вниз. Инструмент нормализует любой угол (−45 превращается в 315), а обратное направление старого синтаксиса уже учтено в строке с -webkit-.

Похожие инструменты

Все инструменты категории Утилиты →

Проверка контрастности

Вычислите коэффициент контрастности WCAG для двух цветов с вердиктами AA и AAA для обычного и крупного текста и живым предпросмотром. Всё работает в вашем браузере.

Все инструменты →

Конвертер цветов

Вставьте цвет в hex, rgb() или hsl() и получите все три формата плюс готовый ряд тонов и оттенков для вашей дизайн-системы.

Все инструменты →

Выбор цвета

Выберите цвет из образца или возьмите его прямо с экрана через EyeDropper API — hex, RGB и HSL копируются одним кликом.

Все инструменты →

Рамка для изображения

Добавьте однотонную или прозрачную рамку одному изображению или целому пакету — живой предпросмотр, вывод PNG или JPG, всё целиком в вашем браузере.

Все инструменты →

Встроить этот инструмент

Одна строка — и инструмент на вашем сайте. Он работает в браузере посетителя.

<iframe src="https://zoyku.com/ru/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing