Генератор CSS-градиента с несколькими цветами
Создайте CSS-градиент с любым числом цветовых остановок, выберите тип (линейный или радиальный) и настройте угол — с предпросмотром в реальном времени. Код вычисляется и отображается полностью в вашем браузере.
Как это работает
Когда цветов больше двух, CSS-градиент становится гораздо выразительнее: три остановки и более позволяют создавать переходы в духе заката, голографический эффект или современный фон для лендинга. Инструмент позволяет свободно добавлять, позиционировать (в процентах) и удалять каждую цветовую остановку, а предпросмотр обновляется в реальном времени и показывает точный CSS-код для копирования.
Чем отличаются линейный и радиальный градиенты?
Линейный градиент (linear-gradient) идёт по прямой под заданным углом, а радиальный (radial-gradient) начинается в центральной точке и расходится кругами наружу — этот эффект часто используют для светящихся ореолов или круглых фонов секций.
Что означает позиция цветовой остановки?
Позиция (в процентах) показывает, в каком месте градиента цвет достигает полной интенсивности, прежде чем начать переходить в следующую остановку. Чем ближе две остановки, тем резче переход между их цветами; чем дальше друг от друга — тем плавнее.
100% локальная обработка: градиент составляется, а код создаётся прямо в вашем браузере, данные никуда не отправляются.