Обзор Mesh-градиент
Слоистые радиальные градиенты с экспортом CSS и SVG
Как использовать
Создавайте плавные многоточечные меш-градиенты и экспортируйте их как CSS или SVG для вашего интерфейса.
Mesh-градиент
Четыре слоя радиальных градиентов поверх базового цвета. Превью и CSS обновляются вместе.
Что такое mesh-градиент
Несколько радиальных градиентов накладываются на базовый цвет. Каждый цвет растворяется в прозрачность в своей точке, создавая мягкие органичные переходы без единого видимого направления.
Слои независимы, поэтому сдвиг одного центра не меняет остальную композицию.
Вывод CSS и SVG
CSS-версия использует background-image с четырьмя слоями radial-gradient и работает в современных браузерах. SVG-версия — один переносимый файл для дизайн-инструментов и печати.
Частые вопросы
Почему четыре цвета?
Четыре центра дают достаточно глубины для hero-блоков и карточек, не превращаясь в грязь. Добавить слои можно в экспортированном коде.
Как сохранить читаемость текста?
Ставьте текст на спокойную зону, добавляйте полупрозрачную панель и проверяйте контраст инструментом WCAG.
Поддерживается ли это везде?
Слоистые радиальные градиенты в CSS поддерживаются широко. Очень старые браузеры могут показать только базовый цвет.