Обзор CSS-градиент
Перцептивно равномерный градиент
Как использовать
Создавайте линейные и радиальные градиенты с несколькими остановками, меняйте угол и цветовое пространство, затем копируйте готовый CSS.
CSS-градиент
0%
100%
Линейные, радиальные и конические градиенты
Линейный смешивает цвета вдоль прямой под выбранным углом. Радиальный расходится от центра, конический идёт вокруг центра как цветовой круг.
Перемещайте каждую точку от 0% до 100%, управляя началом и концом, затем копируйте CSS.
CSS-вывод и производительность
CSS-градиенты рисуются браузером без запросов изображений, поэтому остаются чёткими при любом разрешении.
Для большинства интерфейсов достаточно двух-трёх точек. Многие точки почти не влияют на скорость, но усложняют поддержку.
Частые вопросы
Как использовать градиент?
Скопируйте объявление background и вставьте в CSS-правило. Превью и код обновляются вместе.
Какой угол выбрать?
0deg — вверх, 90deg — вправо, 180deg — вниз. Пресеты переключают на частые направления.
Градиент может быть прозрачным?
Да. После копирования используйте прозрачную точку или rgba в CSS.
Работают ли градиенты в письмах?
Многие почтовые клиенты игнорируют градиенты. Укажите сплошной запасной цвет.