Генератор CSS-градиента
Соберите линейный градиент CSS из двух цветов с точными позициями остановок. Укажите угол, начальную и конечную точку, затем скопируйте готовое свойство background для страницы или макета. Цвета принимаются в HEX-формате. Позиции задаются процентами от градиентной линии и могут оставлять до первой либо после второй остановки однотонный участок. Внешний вид зависит от размера элемента и цветопередачи устройства; проверяйте итог в своём интерфейсе.
Исходные данные
Замените примерные значения своими. Результат готовится в браузере.
Как работает инструмент
Цвета принимаются в HEX-формате. Позиции задаются процентами от градиентной линии и могут оставлять до первой либо после второй остановки однотонный участок.
Что учитывать
Внешний вид зависит от размера элемента и цветопередачи устройства; проверяйте итог в своём интерфейсе.
Пример для значений в форме
Эти результаты получены из значений, уже заполненных выше. Кнопка «Сбросить» возвращает исходный пример.
- Готово:
- gradient.css
- Первый цвет:
- #2563eb
- Второй цвет:
- #14b8a6
Как получить свой результат
- Введите данные в поле «Первый цвет HEX» и остальные параметры.
- Проверьте ограничения метода и нажмите «Сгенерировать».
- Скопируйте результат либо сохраните его в текстовом или специальном формате.
Ещё генераторы
Генератор адресов страниц из названий
Преобразуйте список названий в короткие адреса для страниц, файлов или карточек товара.
Открыть инструмент →План пакетного переименования файлов
Подготовьте список новых имён для серии фотографий, документов или сканов.
Открыть инструмент →Генератор последовательных номеров
Составьте последовательность внутренних номеров для заказов, актов, накладных или образцов.
Открыть инструмент →