Нажмите Ctrl+D, чтобы добавить страницу в закладки
Бесплатный онлайн-генератор CSS-градиентов. Визуально проектируйте линейные, радиальные и конические градиенты, затем мгновенно копируйте CSS-код.
Как использовать Генератор градиентов?
Выберите тип градиента (линейный, радиальный и т. д.).
Добавьте точки цвета и задайте цвета.
Скопируйте сгенерированный CSS-код.
Часто задаваемые вопросы о Генератор градиентов
Какие типы градиентов поддерживаются?
Поддерживаются линейные, радиальные и конические градиенты.
Могу ли я скопировать CSS-код напрямую?
Да, копируйте сгенерированный код CSS-градиента одним кликом, чтобы применить его прямо на своём сайте.
Почему в середине градиента появляется грязно-серая полоса?
Когда два цвета лежат на круге напротив друг друга, смешение проходит через точку, где насыщенность падает почти до нуля, и это видно как тусклая серая полоса. Обычные виновники — пары синий-оранжевый и красный-зелёный. Третий цвет в качестве промежуточной остановки уводит переход в обход серого, а два соседних оттенка снимают проблему изначально.
Можно ли сохранить градиент как изображение, а не только как CSS?
Да, можно скачать PNG и сразу поставить его фоном слайда, картинкой для соцсетей или в макет для печати. Но для веб-страницы лучше сам CSS: не нужно загружать файл, градиент растягивается на любой размер экрана без искажений и не даёт ступенек, как увеличенное растровое изображение.
Советы по эффективному использованию Генератор градиентов
Смешивайте оттенки, близкие на цветовом круге: противоположные дают грязно-серую полосу.
Диагональ в 135 градусов — самый безопасный вариант для баннеров и фона карточек.
Если сверху ляжет текст, проверяйте контраст по самой светлой точке градиента.