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

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

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

Описание параметров

Линейный

Цвета меняются вдоль прямой линии. 0° — вверх, 90° — вправо, 180° — вниз.

Радиальный

Цвета расходятся от центральной точки кругом или эллипсом, вписанным в элемент.

Конический

Цвета идут по кругу вокруг центральной точки, как на цветовом круге или круговой диаграмме.

Повторять

Повторяет узор; расположите точки в коротком диапазоне, например от 0% до 10%, чтобы получить полосы.

Как выглядит сгенерированный код

Одни и те же два цвета, записанные для каждого типа. Опорные точки всегда записываются с позицией в процентах:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Версия для Tailwind оборачивает то же значение в класс с произвольным значением. Пробелы заменяются подчёркиваниями, а пробелы после запятых удаляются:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

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

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

Конфиденциальность

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