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

Создайте линейный или радиальный градиент и скопируйте готовый CSS-код.

Угол 90deg
Цветовые точки

Превью

CSS
Скопировано!

Примеры градиентов

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

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

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

  1. Выберите тип градиента

    Линейный или радиальный, задайте угол и цвета.

  2. Настройте остановки

    Добавьте цветовые точки на шкале.

  3. Скопируйте CSS

    Готовое свойство background появится в поле кода.

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

Да, в этом инструменте сгенерированный CSS работает во всех современных браузерах с поддержкой CSS Gradients

Linear gradient, radial gradient, несколько цветов, настройка угла, прозрачность

Да, в этом инструменте сгенерированный CSS работает во всех современных браузерах с поддержкой CSS Gradients

Да, нажмите "Копировать" - генератор выдает готовый linear-gradient или radial-gradient для вставки в стили

В генераторе нажмите "Добавить" у цветовых точек - превью и CSS-код обновятся автоматически