Генератор CSS-градиентов онлайн
Создавайте linear, radial и conic градиенты с живым превью. Экспортируйте результат как CSS, Tailwind или raw-значение.
background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%);
Как формируется код CSS-градиента
Градиентный фон в современных браузерах строится путем плавного смешивания цветов в заданном направлении. Описание линейного градиента включает угол направления и список контрольных точек с указанием их позиций.
- — угол направления распространения градиента в градусах (deg);
- — цвет -й контрольной точки (HEX, RGB или HSL);
- — положение -й контрольной точки в процентах от начала градиентной линии (от 0% до 100%).
Браузер рассчитывает промежуточные цвета автоматически на основе этих параметров, создавая непрерывный цветовой переход.
Разновидности градиентов в CSS
Вы можете генерировать несколько типов градиентов для различных дизайнерских задач:
- Линейный (linear-gradient) — переход идет по прямой линии под выбранным углом.
- Радиальный (radial-gradient) — переход расходится кругами из центральной точки.
- Конический (conic-gradient) — переход вращается вокруг центральной точки, напоминая цветовое колесо.
Часто задаваемые вопросы
Источники и нормативная база
- MDN — linear-gradient()MDN Web Docs
- MDN — radial-gradient()MDN Web Docs
- MDN — conic-gradient()MDN Web Docs
- Tailwind CSS — Background ImageTailwind Labs
- CSS Gradient — by ColorSpacecssgradient.io (для сравнения)
Расчёты выполняются на основе указанных нормативных и справочных источников. Ссылки открываются в новой вкладке.
Похожие инструменты
Создавайте гармоничные палитры из 5 цветов: монохром, аналогичная, комплементарная, триада, тетрада. HEX/RGB/HSL, UI-превью, экспорт в CSS, Tailwind и JSON.
Переводите цвета между HEX, RGB и HSL, выбирайте оттенок в палитре и получайте ориентировочный CMYK для печати.
Сгенерируйте случайный цвет или палитру из 5 оттенков с фильтрами: светлый, тёмный, пастельный, яркий, тёплый, холодный. HEX, RGB, HSL — копируются в один клик.