Раньше анимировать градиенты было мучением: background-position дёргался, стоп-слоты с 0.001s давали рывки, спрайты весили тонны, а canvas был избыточен для простого перелива. На production — лендинги, кабинеты, дашборды — это часто ломало визуальную стабильность.
Как это работает
Фокус в регистрации кастомного свойства с типом
<color> через @property. Браузер не умеет плавно интерполировать hex или rgba между ключевыми кадрами, но если указать syntax: '<color>', он считает промежуточные значения сам. Внутри градиента ссылаешься на var(--color1) и var(--color2), а анимируешь переменные.@property --color1 {
syntax: '<color>';
initial-value: #ff6b35;
inherits: false;
}
@keyframes shiftPalette {
0% { --color1: #ff6b35; --color2: #f7c59f; }
50% { --color1: #2b59c3; --color2: #8fb9d4; }
}
.element {
background: linear-gradient(45deg, var(--color1), var(--color2));
animation: shiftPalette 4s infinite ease-in-out;
}Где применять и что учесть
Техника подходит для элементов с переключением дня/ночи, карточек, меняющих настроение при hover, или фонов hero-секций. Анимация идёт на GPU, без JS и без визуальной регрессии. Типичная ошибка — забыть fallback для старых браузеров (Safari до 15.4, IE). Просто задай статичный градиент без анимации, чтобы не сломать layout.
Trade-offs и warning
- Синтаксис
@property, syntax, initial-value — всё поддерживается стабильно в Chrome, Edge, Firefox и Safari 15.4+.- Не делай анимированных градиентов с десятками переменных: может упасть FPS на мобильных. 2-3 цвета — оптимально.
- Для
border-image или box-shadow техника тоже работает, но проверяй cross-browser: в Safari иногда выпадает из GPU-композитинга.Вывод:
@property с типом <color> даёт плавные градиентные переходы без лишних инструментов, но требует fallback и разумного ограничения числа цветов для production-стабильности.