ИзображенияProcessado no seu navegador

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

Создавайте линейные, радиальные и конические градиенты визуально и мгновенно экспортируйте их в формат CSS или Tailwind.

0 из 3 использований сегодня · осталось 3. Перейдите на Pro и снимите ограничение.

Обновить

Тип

linear

Точки

3/8

Экспорт

CSS + Tailwind

Mesh

Mesh активен

Предпросмотр и код

Базовые цвета

Цвет 01

#8C6A2D

Начальная база градиента.

Цвет 02

#D3B06F

Конечная база градиента.

CSS

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Tailwind

bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]

Точки и композиция

Цветовые точки

#8C6A2D

0% · 100%

Позиция

Прозрачность

#D3B06F

52% · 96%

Позиция

Прозрачность

#2B1D08

100% · 100%

Позиция

Прозрачность

Геометрия

Тип и направление

Тип

Угол

135°

Центр и параметры

Центр X

50%

Центр Y

50%

Повторение

Полезный ритм для разделителей, паттернов и продуктовых линий.

Расширенный экспорт

Mesh-наложение

Наложение для визуальных hero-блоков и поверхностей с глубиной.

2 слоёв

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Пакет токенов

CSV с Hero, Surface и Accent, готовый к внедрению.

:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }

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

Как визуально создать CSS-градиент

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

Выберите тип градиента
Линейный (самый распространённый, направленные переходы), радиальный (от центра к краям) или конический (дуговой — отлично подходит для диаграмм).
Задайте цвета и точки остановки
Добавьте два и более цветов. Перетаскивайте точки, чтобы менять их положение. Цвета в форматах HEX, RGB или HSL.
Настройте угол или центр
Линейный: 0deg (вертикальный), 90deg (горизонтальный), 45deg (диагональный). Радиальный: задайте начальную точку в пикселях или %.
Скопируйте CSS
Готовый код для вставки в таблицу стилей — с префиксами -webkit/-moz для максимальной совместимости.

Связанные

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