Превью
Примеры градиентов
Как создать CSS градиент
Генератор CSS-градиентов
Инструмент собирает свойство background с линейным или радиальным градиентом. Вы задаете тип, угол и набор цветовых точек, а превью и CSS-код обновляются на лету - остается скопировать результат в стиль.
Линейный градиент удобен для заливки кнопок, шапок и фонов секций, где цвет идет по прямой под нужным углом. Радиальный дает мягкое пятно света от центра и подходит для акцентов, подложек и эффекта подсветки. Прозрачные остановки позволяют наложить градиент поверх фотографии, не перекрывая ее полностью.
Несколько цветовых точек задают многоцветные переходы: порядок и цвет каждой точки меняют характер заливки. Готовые примеры (Закат, Океан, Лес, Радуга и другие) собраны кнопками в карточке - их можно взять за старт и подстроить под свою палитру.
Как собрать CSS-градиент
-
Выберите тип градиента
Вкладками переключите линейный или радиальный; для линейного задайте угол ползунком.
-
Соберите цветовые точки
Кнопкой Добавить поставьте нужные остановки и подберите цвет каждой из них.
-
Скопируйте фон
Готовое свойство background с градиентом появится в поле CSS - нажмите Копировать.
Вопросы и ответы
Линейный (linear-gradient) заливает цвет по прямой под заданным углом, радиальный (radial-gradient) расходится кругом от центра. Тип переключается вкладками над превью.
Для линейного типа двигайте ползунок Угол: 90deg дает переход слева направо, 180deg - сверху вниз. У радиального градиента угол не используется.
Да, у цветовой точки задайте цвет с прозрачностью - градиент плавно уйдет в прозрачность. Это удобно для наложений поверх фото и картинок.
Нажмите Копировать под полем CSS - в буфер обмена попадет свойство background с linear-gradient или radial-gradient.