Веб-разработка
CSS Gradient Generator
Собрать линейный, радиальный или конический градиент из нескольких цветов и получить готовый CSS.
0° — сверху, далее по часовой стрелке.
CSS-градиент — это плавный переход между несколькими цветами, сгенерированный самим браузером без изображения. Инструмент позволяет визуально собрать линейный, радиальный или конический градиент и сразу скопировать готовый CSS-код.
Как пользоваться
- Добавьте цветовые точки (color stops) и перетащите их для настройки позиции перехода.
- Выберите тип градиента — линейный (направление в градусах), радиальный (форма и позиция центра) или конический (вращение вокруг точки).
- Скопируйте готовый CSS одним нажатием и вставьте в background или background-image.
Типичные сценарии
- Подбор фона для hero-секции или кнопки без открытия графического редактора.
- Воспроизведение градиента из макета дизайна (Figma и т.п.) в точном CSS-синтаксисе.
- Быстрый эксперимент с цветовыми переходами перед тем, как зафиксировать решение в дизайн-системе.
Что стоит помнить
Радиальный градиент по умолчанию растягивается под форму элемента (эллипс), а не всегда остаётся кругом, — это стоит учитывать на прямоугольных блоках.
Несколько градиентов можно наложить друг на друга через background-image с запятой — это работает как слои, где первый в списке сверху.
Статья об этом инструменте: CSS-градиенты: чем linear отличается от radial и conic
Часто задаваемые вопросы
В чём разница между линейными, радиальными и коническими градиентами?
Линейные градиенты переходят вдоль прямой линии под выбранным углом, радиальные расходятся наружу от центральной точки в форме круга или эллипса, а конические вращают цвета вокруг центральной точки, как цветовое колесо.
Поддерживаются ли конические градиенты во всех браузерах?
Все текущие основные браузеры поддерживают конические градиенты, но это более новая функция CSS, чем линейные или радиальные градиенты, поэтому очень старые версии браузеров могут их не отображать.
Что я получаю на выходе?
Инструмент генерирует готовый к использованию синтаксис CSS background с выбранными цветами, стопами и позициями, который можно вставить прямо в ваш стиль.
Чем repeating-linear-gradient отличается от обычного linear-gradient?
Обычный linear-gradient растягивает заданную последовательность цветов ровно один раз на весь элемент, тогда как repeating-linear-gradient повторяет эту же последовательность color stops циклически, создавая полосатый или узорчатый фон.
Можно ли наложить несколько градиентов друг на друга как фон?
Да, свойство background-image принимает список градиентов через запятую, и они накладываются слоями друг на друга по принципу, похожему на наложение нескольких фоновых изображений — верхний в списке отображается сверху.