Генератор анімованої градієнтної рамки на CSS
Згенеруйте плавну обертову райдужну рамку, що коректно враховує border-radius; побудовано на @property, conic-gradient та mask-composite — скопіюйте справжній CSS і дивіться, як він обертається наживо.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Обертова райдужна рамка виглядає просто, поки ви справді не спробуєте створити її на CSS: анімація кута всередині conic-gradient() зі звичайною кастомною властивістю не дає корисного результату, тому що браузер не знає, що це кут, і не може інтерполювати між 0deg та 360deg — він просто стрибає. Цей генератор використовує справжнє вирішення — CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` точно повідомляє браузеру, який тип значення зберігає кастомна властивість, що й уможливлює плавну, апаратно прискорену інтерполяцію всередині правила @keyframes.
Саме кільце — це псевдоелемент ::before, розмір якого більший за блок (відступ на мінус товщину рамки), а його фон установлено як `conic-gradient(from var(--border-angle), ...)`, що зациклюється на першому кольорі, аби розгортка не мала видимого шва. Потім маска виконує основну роботу з формування: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` залишає лише кільцеподібну різницю між padding-box та content-box, відкидаючи суцільний градієнтний прямокутник скрізь інде. Старіший варіант Safari `-webkit-mask-composite: xor` виконує ту саму операцію і постачається поруч зі стандартною властивістю, тож ефект відображається однаково, а не мовчки ламається на одному з рушіїв.
Підтримка border-radius — не прикручена зверху надбудова: `border-radius: inherit` псевдоелемента означає, що будь-який радіус, який ви задаєте блоку, автоматично переноситься на кільце, тож кнопка-пігулка або заокруглена картка отримує заокруглену світну рамку замість прямих країв, що вилазять із заокруглених кутів. Перевірте наживо: перетягніть повзунок радіуса від гострого прямокутника до повної пігулки й побачите, як кільце повторює форму на кожному кроці — саме ця деталь відрізняє справжню реалізацію цієї техніки від підробленого скриншоту.
Усе інше на сторінці безпосередньо пов'язане зі згенерованим кодом: повзунок ширини — це товщина кільця та відступи/внутрішні поля псевдоелемента, повзунок тривалості — animation-duration у @keyframes, перемикач напрямку просто змінює знак кінцевого кута ключового кадру (+360deg або -360deg), а кожна колірна зупинка є записом через кому всередині виклику conic-gradient(). Усе це працює у вашому браузері без зображень, без циклу анімації на JavaScript і без зовнішніх сервісів — скопіюйте блок CSS, і він обертатиметься скрізь, куди ви його вставите.