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

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

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

Цвет 1

Цвет 2

Цвет 3

Тип

Угол (°)

Цветовые остановки Использовать третью цветовую остановку

Предпросмотр обновляется по мере изменения цветов.

О CSS-градиентах

Линейные и радиальные

Линейный градиент течёт вдоль прямой под заданным углом. Радиальный градиент исходит из центральной точки по кругу.

Где градиенты блистают

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

Часто задаваемые вопросы

Можно ли использовать больше трёх цветов?

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

Имеет ли значение угол для радиальных градиентов?

Нет — угол применяется только к линейным градиентам. Радиальные градиенты распространяются равномерно из центра.

Загружаются ли моё изображение или данные цветов?

Нет. Вся обработка происходит локально в вашем браузере.