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

Выберите цвета и углы, чтобы генерировать код CSS-градиента с предварительным просмотром

История обновленийДобавлен генератор CSS-градиентов, создание кода путём выбора цвета и углаПросмотр обновлений

Особенности

Одновременное обновление превью и кода

Внешний вид и CSS обновляются вместе при изменении цвета или угла

Поддержка линейных, радиальных и конических градиентов

Точная настройка угла, формы и центральной позиции для каждого типа

До 10 цветов с регулировкой перетаскиванием

Перемещайте цвета по полосе, регулируйте прозрачность с помощью ползунка

8 образцов и случайная генерация

Начните с готовых комбинаций или случайной палитры и уточняйте детали

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

Выберите тип

Выберите тип градиента: линейный, радиальный или конический

Установите цвета

Выберите цвета по коду или образцам, добавляйте цвета через «Добавить цвет», регулируйте позицию и прозрачность

Отрегулируйте направление

Для линейного — задайте угол или используйте кнопки направления, для радиального и конического — укажите центральную позицию

Скопируйте код

Нажмите «Копировать» и вставьте однострочный CSS в свой стиль

Примеры использования

Создание фона героя-изображения

Определите фон верхней части сайта или кнопки без написания кода

Выбор цветовой схемы заголовков блога

Выберите похожую комбинацию из образцов и примените к фону заголовков статей

Полупрозрачный оверлей на фото

Создайте полупрозрачный слой, наложив цвет с низкой прозрачностью на фотографию

Регулировка многоцветных градиентов

Перемещайте границы между тремя и более цветами перетаскиванием

Основные знания

Различия между linear, radial и conic

CSS содержит три функции градиентов с разными способами изменения цвета. Все они используются в свойстве background.

linear-gradient：linear-gradient создаёт линейный градиент, где цвет меняется вдоль прямой линии под указанным углом.
radial-gradient：radial-gradient создаёт радиальный градиент, где цвет распространяется от центра наружу в виде круга или эллипса.
conic-gradient：conic-gradient создаёт конический градиент, где цвет меняется по кругу вокруг центра по часовой стрелке.

Соответствие углов и ключевых слов направления

В linear-gradient угол 0deg указывает на направление снизу вверх, и при увеличении значения происходит поворот по часовой стрелке. Углы также можно записывать ключевыми словами, например «to right». 90deg соответствует «to right», а 180deg — «to bottom».

Как записывать точки остановки цвета и прозрачность

Точка остановки цвета (color stop) — это позиция в градиенте, где задан определённый цвет. 0% — начальная точка, 100% — конечная. Например, «#3B82F6 0%, #8B5CF6 100%» означает переход от синего в начале к фиолетовому в конце.

Формат #RRGGBB：Формат #RRGGBB описывает цвет через интенсивность красного, зелёного и синего (по 2 шестнадцатеричные цифры каждый). Например, #FF0000 — непрозрачный красный.
Формат rgba：Формат rgba задаёт цвет через значения красного, зелёного, синего (0–255) и прозрачность (0–1). Прозрачность 0.5 означает полупрозрачность.