Инструменты для работы с цветом
Генератор градиентов
Создавайте CSS для линейных и радиальных градиентов из двух цветов и выбранного типа перехода.
Запустить инструмент
Генератор градиентов создаёт готовый CSS-код для стилизации веб-страниц, кнопок, баннеров и фоновых блоков. Чтобы сформировать фон, заполните поля «Цвет 1» и «Цвет 2», затем выберите подходящий вариант в меню «Тип градиента». Инструмент поддерживает линейный и радиальный переходы между оттенками. Поле «Угол» задаёт направление наклона исключительно для линейного варианта в градусах от нуля до трехсот шестидесяти. Если оставить параметры по умолчанию, сервис использует оттенки #ff6b6b и #4ecdc4, значение угла сорок пять градусов и линейный тип. При линейном режиме введённый угол автоматически преобразуется в целое число и приводится по круговому модулю. Если значение в поле угла не удаётся распознать как число, применяется стандартный наклон в сорок пять градусов. Оттенки переносятся в итоговое правило без дополнительной проверки, поэтому указывайте корректные HEX-коды или имена цветов. Для радиального градиента переключите тип и задайте нужную палитру.
Инструкция
- Введите значение первого цвета в поле «Цвет 1», например #ff6b6b.
- Введите значение второго цвета в поле «Цвет 2», например #4ecdc4.
- Укажите число в градусах в поле «Угол». Для линейного градиента оно задаёт направление, а для радиального не влияет на результат.
- В поле «Тип градиента» выберите линейный или радиальный вариант.
- Нажмите кнопку генерации, скопируйте полученный CSS-текст и вставьте его в файл стилей.
- Проверьте правильность записей цветов перед запуском, так как инструмент не проверяет валидность названий.
Примеры
- Для линейного градиента укажите в поле «Цвет 1» значение #ff6b6b, в поле «Цвет 2» значение #4ecdc4, в поле «Угол» введите 45 и выберите линейный тип. После запуска появится CSS-код со скошенным переходом под углом 45 градусов.
- Для радиального градиента введите в поле «Цвет 1» значение #7c3aed, в поле «Цвет 2» значение #f59e0b и выберите радиальный тип. Поле «Угол» в этом режиме не определяет вид перехода.
Частые вопросы
Что создаёт генератор?
Генератор создаёт готовый CSS-текст для линейного или радиального градиента из двух выбранных цветов. В линейном режиме также учитывается заданный угол наклона.
Как работает поле «Угол»?
При выборе линейного типа значение из поля «Угол» преобразуется в целое число и приводится по модулю 360 градусов. Если ввести некорректный текст, применится наклон в 45 градусов.
Как создать радиальный градиент?
Выберите радиальный вариант в поле типа и укажите два цвета. Переход распределится кругами от центра, а значение угла в этом режиме не будет влиять на результат.
Что произойдёт при выборе другого значения в поле «Тип градиента»?
Радиальный вариант создаёт круговой градиент, а линейный формирует направленный переход. Любое другое значение обрабатывается инструментом как линейный тип.
Какие значения указывать в полях цветов?
Значения цветов подставляются в CSS напрямую, поэтому используйте шестнадцатеричные коды вроде #ff6b6b, формат rgb или стандартные ключевые слова CSS.