Веб-разработка
CSS Gradient Generator
Собрать линейный, радиальный или конический градиент из нескольких цветов и получить готовый CSS.
0° — сверху, далее по часовой стрелке.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Статья об этом инструменте: CSS-градиенты: чем linear отличается от radial и conic
Часто задаваемые вопросы
В чём разница между линейными, радиальными и коническими градиентами?
Линейные градиенты переходят вдоль прямой линии под выбранным углом, радиальные расходятся наружу от центральной точки в форме круга или эллипса, а конические вращают цвета вокруг центральной точки, как цветовое колесо.
Поддерживаются ли конические градиенты во всех браузерах?
Все текущие основные браузеры поддерживают конические градиенты, но это более новая функция CSS, чем линейные или радиальные градиенты, поэтому очень старые версии браузеров могут их не отображать.
Что я получаю на выходе?
Инструмент генерирует готовый к использованию синтаксис CSS background с выбранными цветами, стопами и позициями, который можно вставить прямо в ваш стиль.
Чем repeating-linear-gradient отличается от обычного linear-gradient?
Обычный linear-gradient растягивает заданную последовательность цветов ровно один раз на весь элемент, тогда как repeating-linear-gradient повторяет эту же последовательность color stops циклически, создавая полосатый или узорчатый фон.
Можно ли наложить несколько градиентов друг на друга как фон?
Да, свойство background-image принимает список градиентов через запятую, и они накладываются слоями друг на друга по принципу, похожему на наложение нескольких фоновых изображений — верхний в списке отображается сверху.