Генератор CSS-градиентов
Подберите красивый градиент для фона, кнопки или баннера и получите готовый CSS-код. Выбирайте тип (линейный или радиальный), угол и цвета — предпросмотр обновляется сразу. Скопируйте код и вставьте в стили сайта.
Что такое CSS-градиент
Градиент — это плавный переход одного цвета в другой. В CSS его задают функциями linear-gradient и radial-gradient, и он работает как фон: не нужна картинка, всё рисует браузер. Градиенты используют для фонов сайтов, кнопок, шапок, карточек и баннеров — они делают интерфейс современнее и при этом ничего не весят, в отличие от фоновых изображений, а значит не замедляют загрузку.
Линейный и радиальный
Линейный градиент идёт по прямой под заданным углом: 90° — слева направо, 0° — снизу вверх. Радиальный расходится из центра кругами. У каждого цвета есть точка остановки в процентах — она задаёт, где именно цвет достигает полной насыщенности. Добавляя несколько цветов с разными позициями, можно собрать как простой двухцветный переход, так и сложную многоцветную заливку.
Как пользоваться
Выберите тип и угол, задайте цвета и их положение ползунками — предпросмотр сверху меняется мгновенно. Можно начать с готового набора и доработать его. Когда результат нравится, скопируйте строку CSS и вставьте её в стиль нужного элемента (свойство background). Всё считается в браузере.
Что рядом
Подобрать отдельные цвета и их сочетания поможет инструмент подбора цвета, а уменьшить вес фоновых картинок, если они всё же нужны, — сжатие изображений.