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

Как это работает

Линейный CSS-градиент (linear-gradient) позволяет создать визуально насыщенный фон — баннер, кнопку, фон секции — без изображения или внешнего дизайн-инструмента. Выберите два цвета и угол, посмотрите предпросмотр в реальном времени, а затем скопируйте сгенерированное свойство background прямо в вашу таблицу стилей. Это самый быстрый способ создать прототип градиентного фона перед его доработкой в вашем фирменном стиле.

Могу ли я использовать более двух цветов в градиенте?

CSS позволяет это нативно (например, linear-gradient(90deg, #fff, #f00, #00f)), но этот инструмент намеренно сосредоточен на градиенте из двух цветов — самом распространённом сценарии для фона секции или кнопки. Для более сложного градиента вы можете скопировать сгенерированный здесь результат, а затем добавить дополнительные цветовые точки прямо в вашем CSS.

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

Угол определяет направление, в котором развивается градиент: 0° идёт снизу вверх, 90° идёт слева направо, 180° идёт сверху вниз и т.д. Это то же соглашение, что используется нативно функцией CSS linear-gradient(), поэтому скопированный здесь код даёт точно такой же результат, какой вы видите в предпросмотре.

Обработка на 100% локально: генерация CSS-кода выполняется прямо в вашем браузере через WebAssembly, без каких-либо обращений к внешнему серверу.