Что такое Градиент в CSS?

Визуальный конструктор градиентов для создания линейных, радиальных и конических градиентов с несколькими точками цвета и копирования CSS-кода. Настраивайте углы, позиции и цвета с живым предпросмотром.

Стройте линейные, радиальные или конические градиенты, перетаскивая стопы на живой полосе и наблюдая, как превью обновляется в реальном времени. Вставьте уже существующий CSS-градиент, чтобы редактировать его на месте, выберите готовый пресет (Sunset, Aurora, Rainbow), измените угол и скопируйте синтаксис. На выходе — чистый CSS без префиксов и JavaScript.

Как использовать

1. Выберите тип градиента (линейный, радиальный или конический) и задайте направление или угол.
2. Добавляйте, удаляйте и перемещайте точки цвета, кликая по полосе градиента или используя цветовые пикеры.
3. Скопируйте сгенерированный CSS-код и вставьте его прямо в свою таблицу стилей.

Когда использовать

• Оформление фона hero-секции, где важна точная позиция стопов и угол.
• Правка уже существующего градиента в таблице стилей: вставить, поправить визуально, скопировать обратно.
• Создание конического градиента для фона в стиле круговой диаграммы или радужного лоадера.

Результат

Попробуйте градиент заката: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — отлично подойдёт для фона hero-секции.

Частые вопросы

Чем отличаются linear, radial и conic?

Linear ведёт цвета вдоль прямого угла. Radial расходится от центра концентрическими кольцами. Conic вращается вокруг центра, как круговая диаграмма. Все три используют одинаковый синтаксис стопов.

Как импортировать готовый градиент из CSS?

Вставьте полное объявление в поле Import, например background: linear-gradient(135deg, #ff6b35, #f72585);, и нажмите Import. Редактор распарсит угол, стопы и тип, и подставит их в визуальный интерфейс.

Почему на некоторых мониторах виден бандинг (полосы)?

Бандинг появляется, когда соседние стопы далеки по оттенку, а монитор 8-битный. Помогает промежуточный стоп или сужение углового диапазона. Браузеры с HDR-рендерингом показывают бандинг гораздо слабее.

Можно ли использовать вывод как background-image?

Да. Скопированная строка подходит для background, background-image и любого CSS-свойства, принимающего изображение: border-image, mask и даже fill в SVG в современных браузерах.

Добавляет ли вывод префиксы вроде -webkit-?

Нет. Linear, radial и conic работают без префиксов во всех evergreen-браузерах с 2017 года. Добавление префиксов сегодня только засоряет таблицу стилей.

Похожие инструменты