Генератор CSS-градиентов
Создавайте градиенты визуально и копируйте CSS.
Создавайте линейные или радиальные градиенты с двумя цветами, углом и позицией остановки. Смотрите живой предпросмотр во время настройки, затем копируйте готовое CSS-правило.
135°
100%
Начальный цвет
Конечный цвет
background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);Как создать градиент
- Выберите линейный или радиальный тип градиента.
- Выберите два цвета с помощью пипеток.
- Настройте угол и позицию остановки ползунками.
- Скопируйте полученный CSS и вставьте в свою таблицу стилей.
Часто задаваемые вопросы
В чём разница между линейным и радиальным?
Линейный градиент течёт в одном направлении по прямой, а радиальный расходится от центральной точки.
Можно ли использовать результат во встроенных стилях?
Да. Скопируйте правило background в любое CSS-правило или атрибут style.
Покидают ли цвета мой браузер?
Нет. Генератор работает полностью на вашем устройстве, без загрузок.