Генератор градиентов CSS

Этот генератор градиентов CSS строит линейные и радиальные градиенты из точек цвета, которыми вы управляете, с живым предпросмотром и готовым для вставки объявлением background. Перетаскивайте точки вдоль полосы, задавайте угол или форму, и CSS обновляется мгновенно.

Всё работает в вашем браузере на основе выбранных вами цветов и настроек, поэтому ничего не загружается на сервер, а результат можно скопировать и использовать без интернета.

Линейный градиент смешивает цвета вдоль прямой линии, а угол задаёт её направление: 0 градусов вверх, 90 градусов вправо, 180 градусов вниз. Радиальный градиент растекается наружу от центра в виде круга или эллипса.

Оба являются стандартными значениями CSS, записываются как linear-gradient() и radial-gradient() и используют один и тот же список точек цвета, поэтому смена типа сохраняет ваши цвета и меняет только то, как они распределяются.

Каждая точка цвета это цвет, размещённый на позиции от 0% до 100%. Градиент плавно переходит между соседними точками, поэтому позиция точки определяет, где её цвет достигает максимума и как быстро он переходит в следующий.

Добавляйте столько точек, сколько нужно для многоцветных градиентов, перетаскивайте их для тонкой настройки перехода или щёлкните по полосе, чтобы поставить новую точку там, где хотите. Две точки это минимум, который нужен градиенту.

Скопируйте сгенерированный код и вставьте его как фон любого элемента, например секции, карточки или кнопки. Современные браузеры поддерживают linear-gradient и radial-gradient без префиксов производителей, поэтому значение работает как есть.

Поскольку градиент это просто значение, вы можете использовать его везде, где ожидается фоновое изображение, наложить его поверх сплошного цвета в качестве запасного варианта или переиспользовать одни и те же точки в линейной и радиальной версии для единого вида.