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

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

Генератор CSS-градиентов — это бесплатный онлайн-инструмент для веб-дизайнеров и фронтенд-разработчиков, которым нужен быстрый градиент без написания синтаксиса вручную. Выберите линейный, радиальный или конический градиент, задайте угол в градусах для линейного и конического типов и определите цветовые переходы, каждый со своим HEX-цветом и позицией в процентах. По мере редактирования предпросмотр показывает результат, а соответствующее правило CSS background мгновенно обновляется, чтобы вы могли скопировать его прямо в таблицу стилей. Используйте его для оформления кнопок, hero-фонов, карточек и оверлеев или чтобы изучить, как работают функции linear-gradient(), radial-gradient() и conic-gradient().

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

1. Выберите тип градиента: линейный, радиальный или конический.
2. Для линейного или конического градиента задайте угол в градусах (0-360); радиальный использует центрированный круг и игнорирует угол.
3. Отредактируйте каждый цветовой переход: введите или выберите HEX-цвет и задайте его позицию в процентах (0-100).
4. Нажмите «Добавить переход», чтобы вставить ещё один цвет, или значок корзины, чтобы удалить переход (минимум два перехода сохраняется).
5. Следите за обновлением окна предпросмотра, затем скопируйте сгенерированное правило CSS background кнопкой копирования.

Примеры

Линейный, 90deg, #4f86f7 на 0% и #9333ea на 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Радиальный, переходы #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

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

Какие типы градиентов поддерживаются?

Три: linear-gradient (с углом в градусах), radial-gradient (центрированный круг) и conic-gradient (с начальным углом). Переключайтесь между ними переключателем типа, и CSS обновляется мгновенно.

Как работают цветовые переходы и позиции?

У каждого перехода есть цвет и позиция в процентах от 0 до 100. Переходы записываются в CSS в том порядке, в котором они стоят в списке, ровно так, как их интерпретирует браузер, поэтому вы управляете порядком напрямую. Вы можете добавлять переходы кнопкой «Добавить переход» и удалять их до минимума в два.

Можно ли выбирать цвета визуально вместо ввода HEX?

Да. Нажмите на маленький образец цвета рядом с каждым переходом, чтобы открыть встроенную палитру вашего браузера, или введите HEX-значение вроде #4f86f7 прямо в поле цвета. Предпросмотр и CSS обновляются по мере изменения.

Почему поле угла исчезает для радиальных градиентов?

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

Загружаются ли мои цвета или CSS куда-либо?

Нет. Градиент строится целиком в вашем браузере с помощью локальных вычислений строк и цветов — ни цвета, ни CSS, ни настройки никогда не отправляются на сервер, поэтому он работает офлайн и сохраняет вашу работу приватной.