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

Введите тип, направление и цвета, чтобы получить CSS-код линейного или радиального градиента. Если оставить поля пустыми, генератор использует линейный вариант, направление to right и цвета #ff7e5f, #feb47b.

Для чего нужен генератор CSS-градиентов

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

Инструмент подходит, когда нужно быстро собрать основу оформления и посмотреть, как должны выглядеть параметры будущего градиента. Поля для типа, направления и цветов необязательны. Если оставить их пустыми, применяются значения по умолчанию: линейный тип, направление to right и цвета #ff7e5f, #feb47b. Поэтому можно начать с готового варианта, а затем изменить только нужные параметры.

Для линейного решения направление становится частью сгенерированного CSS. Например, можно указать to bottom, чтобы переход шёл сверху вниз, или использовать направление с углом. Для радиального варианта форма задаётся как круглая, а поле направления не определяет расположение перехода так же, как в линейной ветке.

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

1. Откройте генератор CSS-градиента и найдите поля для типа градиента, направления и цветов. Начните с типа linear, если нужен переход вдоль линии. Для радиального результата введите другое значение типа или оставьте значение, отличное от linear, с учётом того, что такая ветка формирует радиальный градиент круглой формы.

2. В поле направления укажите нужный текст для линейного варианта. Значение to right создаёт переход слева направо, to bottom подходит для перехода сверху вниз, а запись с углом задаёт наклон. Направление имеет смысл настраивать именно при типе linear: при другом типе результат строится как радиальный градиент с формой circle.

3. В поле цветов перечислите оттенки через запятую, например #2563eb, #7c3aed, #f97316. Между запятыми можно оставить пробелы. Инструмент разделяет введённый текст по запятым, убирает пробелы по краям каждого получившегося элемента и соединяет элементы запятой и пробелом. Поэтому запись с разными пробелами будет приведена к единому виду в итоговом CSS.

4. Проверьте введённые значения и запустите создание результата предусмотренным элементом управления. Если поля не заполнены, ориентируйтесь на стандартный линейный вариант с направлением to right и двумя заданными цветами. Если нужен другой набор, замените цвета целиком или отредактируйте отдельный оттенок в исходном поле.

5. Скопируйте показанный CSS-фрагмент в правило нужного элемента, например в background или background-image. Сохраните значение направления и порядок цветов, если хотите повторить тот же визуальный переход. Для радиального результата проверьте, что в сгенерированном фрагменте используется радиальная функция и круглая форма.

Как читать результат и проверять границы

Результат представляет собой CSS-код для градиента, а не готовое изображение. В линейном варианте в коде отражаются выбранный тип, указанное направление и подготовленный список цветов. Если направление не менять, оно остаётся значением to right по умолчанию. Порядок цветов важен: первый элемент списка участвует в начале перехода, а последующие добавляются в указанной последовательности.

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

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

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

Вы оформляете карточку товара и хотите получить вертикальный переход от голубого оттенка к зелёному.

В поле типа укажите linear, в направлении введите to bottom, а в поле цветов вставьте #0ea5e9, #22c55e. Создайте результат и проверьте структуру показанного CSS.

Появляется CSS-фрагмент с линейной функцией градиента, направлением to bottom и цветами в том же порядке, в котором они были введены.

Ограничения

• Инструмент обрабатывает переданный текст цветов и типа: он не проверяет синтаксис цветов или направления, а значение типа, отличное от linear, ведёт к радиальному градиенту с формой circle.

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

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

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

Что произойдёт, если не вводить параметры градиента?

Если поле типа оставить пустым, применяется линейный вариант по умолчанию. Для него также используются направление to right и цвета #ff7e5f, #feb47b, если соответствующие поля не заполнены.

Как сделать градиент сверху вниз?

При типе linear указанное направление включается в CSS-код линейного градиента. При другом тексте типа результат строится как радиальный градиент с круглой формой, поэтому направление не задаёт его как линейный переход.

Как правильно указать несколько цветов?

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