Генератор CSS-градиентов
Создавайте CSS-код линейных и радиальных градиентов, указывая тип, направление и цвета.
Запустить инструмент
Генератор CSS-градиентов создает код для линейного или радиального градиента. Задайте тип градиента, направление и цвета, затем скопируйте полученную строку в таблицу стилей. Если в поле «Тип градиента» указано точное значение linear, сервис добавляет текст из поля «Направление» в код линейного градиента. Например, можно указать to right или to bottom. Любое другое значение в поле «Тип градиента» формирует радиальный градиент с формой circle. В поле «Цвета» перечислите нужные оттенки через запятую или пробелы. Инструмент разделяет текст на отдельные элементы, убирает лишние пробелы вокруг них и объединяет значения запятой с пробелом. Если оставить поля пустыми, применяются значения linear, to right и #ff7e5f, #feb47b. Проверьте правильность написания цветов и направлений самостоятельно, так как инструмент не проверяет синтаксис. Готовый фрагмент кода подходит для вставки в свойство background или background-image.
Инструкция
- Введите значение в поле «Тип градиента». Для линейного градиента используйте точное значение linear.
- Укажите направление в поле «Направление», например to right или to bottom.
- Введите цвета в поле «Цвета» через запятую или пробелы, например #ffffff, #4f46e5.
- Запустите генерацию и скопируйте полученный CSS-код в таблицу стилей.
- Проверьте написание цветов и направления самостоятельно, поскольку инструмент не проверяет их синтаксис.
Примеры
- Оставьте значения по умолчанию, чтобы получить линейный градиент от #ff7e5f к #feb47b с направлением to right.
- Введите radial в поле «Тип градиента» и #ffffff, #4f46e5 в поле «Цвета», чтобы получить радиальный градиент с формой circle.
Частые вопросы
Какие значения используются по умолчанию?
По умолчанию используются linear, to right и цвета #ff7e5f, #feb47b.
Как задать направление линейного градиента?
Введите в поле «Тип градиента» точное значение linear, затем укажите направление, например to right или to bottom. Этот текст будет добавлен в код линейного градиента.
Как создать радиальный градиент?
Введите значение, отличное от linear, например radial. Результат будет использовать радиальный градиент с формой circle.
Как вводить несколько цветов?
Разделяйте цвета запятыми или пробелами. Инструмент уберет пробелы вокруг каждого элемента и соединит цвета в коде через запятую и пробел.