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

Введите два цвета, выберите linear или radial и при необходимости задайте угол, чтобы получить CSS-текст градиента. При пропущенных значениях применяются два цвета по умолчанию, угол 45 градусов и линейная форма.

Назначение и входные данные

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

В качестве исходных данных используются первый цвет, второй цвет, тип градиента и, для линейной формы, угол. Цветовые значения имеют практическое значение: переданный текст попадает в созданный CSS без отдельной проверки цвета. Поэтому перед использованием результата следует внимательно прочитать оба значения и убедиться, что они записаны именно так, как задумано.

Если цветовые поля оставить пустыми, применяются значения #ff6b6b и #4ecdc4. При отсутствии типа выбирается линейная форма, а при отсутствии угла используется 45 градусов. Эти значения позволяют получить результат даже тогда, когда не все параметры были введены вручную.

Порядок создания градиента

1. Откройте генератор и найдите поля для первого и второго цвета. Введите нужные значения, например #6c5ce7 в первое поле и #00cec9 во второе. Если оставить поля пустыми, генератор подставит #ff6b6b и #4ecdc4 соответственно.

2. Выберите тип градиента. Укажите linear, если нужен переход с направлением. Выберите точное значение radial, если нужен круговой радиальный переход. Не используйте произвольное название в надежде получить отдельный формат: значения, отличные от linear и radial, обрабатываются как линейный вариант.

3. Для линейного градиента введите угол в градусах, например 120. Число будет преобразовано в целое и нормализовано по модулю 360. Если поле оставить пустым или ввести текст, который нельзя преобразовать в число, применяется угол 45 градусов.

4. Запустите создание результата предусмотренной кнопкой. После выполнения прочитайте выведенный CSS-текст и проверьте, что в нём присутствуют оба выбранных цветовых значения. Для примера с linear дополнительно найдите угол 120deg и убедитесь, что он соответствует ожидаемому направлению.

5. Если выбран radial, проверьте, что результат описывает радиальную форму, а не ожидаемый направленный переход. При другом значении типа учитывайте линейный формат результата, даже если само переданное значение типа отображается в возвращаемых данных.

6. Перед дальнейшим использованием сопоставьте текст с исходными настройками. Исправьте опечатки в цветах или типе и создайте результат повторно, если отображённая форма, угол или цветовые фрагменты не соответствуют задаче.

Проверка результата и ограничения

Полученный результат представляет собой CSS-текст, который нужно оценивать по форме градиента, двум цветовым фрагментам и параметрам направления. Для линейного варианта в тексте используется заданный угол в градусах вместе с двумя переданными цветами. Значение radial соответствует круговой радиальной форме, поэтому внешний вид и структура такого результата отличаются от линейного варианта.

Угол обрабатывается не как произвольная строка: числовое значение сначала преобразуется в целое, а затем уменьшается по модулю 360. Например, ввод, выходящий за пределы полного оборота, приводится к соответствующему диапазону. Если преобразование невозможно, применяется 45 градусов. Пустой угол также приводит к значению 45 градусов, поэтому неожиданное направление стоит сопоставить с фактически выведенным параметром.

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

Отдельные форматы предусмотрены для linear и точного значения radial. Любой другой тип не создаёт особую третью форму: для него используется линейный формат, хотя переданное значение типа остаётся частью возвращаемых данных. Поэтому результат с неожиданным типом следует трактовать как линейный и повторно проверить выбор формы.

Практический пример

Вы оформляете фон карточки и сравниваете направленный и круговой переходы на одной паре цветов.

Введите #6c5ce7 и #00cec9, выберите linear, укажите 120 и создайте результат. Затем повторите создание с типом radial, чтобы сравнить формы.

Для linear результат содержит функцию линейного градиента, 120deg, #6c5ce7 и #00cec9; для radial ожидается круговая радиальная форма с теми же цветами.

Ограничения

• Цветовые значения вставляются без отдельной проверки, а типы, кроме linear и radial, получают линейный формат.

Частые ошибки

• Неожиданный результат может появиться из-за опечатки в цвете или неподдерживаемого типа. Проверьте оба значения и выберите linear либо radial, затем создайте текст повторно.

Частые вопросы

Как задать угол линейного градиента?

При выборе linear укажите два цвета и угол в градусах. Если поле угла пустое или содержит нечисловой ввод, применяется 45 градусов.

Как получить радиальный градиент?

Выберите точное значение radial, чтобы получить круговую радиальную форму с двумя переданными цветовыми значениями.

Что будет при пустом цвете или опечатке?

Если цвета пропущены, подставляются #ff6b6b и #4ecdc4. Введённое цветовое значение попадает в CSS-текст без отдельной проверки.