Генератор анімованої градієнтної рамки CSS

Обертова веселкова рамка здається простою, доки не спробуєш реально зробити її в CSS: анімація кута всередині conic-gradient() через звичайну кастомну властивість не працює, бо браузер не знає, що значення — це кут, і не може інтерполювати між 0deg і 360deg — воно просто стрибає. Цей генератор використовує справжнє рішення, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` явно повідомляє браузеру тип значення кастомної властивості, і саме це відкриває плавну, дружню до GPU інтерполяцію всередині правила @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, відкидаючи суцільний градієнтний прямокутник усюди інше. Старіший `-webkit-mask-composite: xor` у Safari виконує ту саму операцію і йде поруч зі стандартною властивістю, тож ефект рендериться однаково, а не мовчки ламається в одному з рушіїв.

Підтримка border-radius — не приставлена збоку дрібниця: `border-radius: inherit` на псевдоелементі означає, що який би радіус ви не виставили на блоці, він автоматично переноситься на кільце, тож кнопка-пігулка чи заокруглена картка отримує заокруглену сяючу рамку, а не прямі кути, що вилазять із закруглень. Перевірте наживо: потягніть повзунок радіуса від гострого прямокутника до повної пігулки — кільце слідує за формою на кожному кроці, і саме ця деталь відрізняє справжню реалізацію техніки від фейкового скриншота.

Усе інше на сторінці напряму відповідає згенерованому коду: повзунок ширини — це товщина кільця та inset/padding псевдоелемента, повзунок тривалості — це animation-duration у @keyframes, перемикач напрямку просто змінює знак кінцевого кута в keyframe (+360deg або -360deg), а кожна колірна точка — це елемент через кому всередині виклику conic-gradient(). Усе працює у вашому браузері без зображень, без анімаційного циклу на JavaScript і без зовнішніх сервісів — скопіюйте блок CSS, і обертання продовжиться будь-де, куди ви його вставите.