Генератор градиентов
Создание линейных и радиальных CSS-градиентов.
Задайте тип градиента, угол (для линейного) и до пяти цветовых остановок, затем скопируйте CSS для background или background-image. Превью обновляется при правках.
Ограничения
Не больше пяти остановок. Конические градиенты и сложные многослойные фоны этим генератором не покрываются.
Рекомендуемые инструменты
Частые вопросы
Градиент должен содержать минимум две и может содержать максимум пять цветовых остановок. Для каждой остановки задаются цвет и позиция, что позволяет управлять переходами без ручного написания CSS.
Можно создать линейный или радиальный CSS-градиент. Угол применяется к линейному варианту; для радиального генерируется соответствующая функция radial-gradient.
Разнесите позиции соседних остановок или добавьте промежуточный цвет, не превышая лимит в пять остановок. Совпадающие или очень близкие позиции намеренно создают резкую границу.
Скопируйте готовое значение CSS и используйте его в свойстве background или background-image. Перед применением проверьте контраст текста на всех участках градиента, поскольку фон меняется по площади элемента.