Переливающаяся рамка

Вращающийся conic-gradient светится сквозь 2px щель вокруг карточки.

Наведите на правую карточку.

Живая рамка

conic-gradient вращается под маской

Быстрее по ховеру

наведите — угол разгоняется

Код

<div class="gborder">
  <div class="inner">Контент карточки</div>
</div>

<style>
.gborder { position: relative; border-radius: 18px;
  padding: 2px;                       /* толщина рамки */
  overflow: hidden; isolation: isolate; }
/* большой вращающийся конус за контентом */
.gborder::before { content: ""; position: absolute;
  left: -50%; top: -50%; width: 200%; height: 200%; z-index: -1;
  background: conic-gradient(#ff2e97, #ff9a2e, #eaff2e,
    #2eff9a, #2e97ff, #972eff, #ff2e97);   /* шов замкнут */
  animation: spin 5s linear infinite; }
.inner { background: #12141c; border-radius: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>

Промпт для ИИ

Сделай переливающуюся рамку: контейнер с padding 2px (толщина рамки), overflow:hidden и isolation:isolate; за контентом ::before размером 200% (left/top -50%) с conic-gradient радуги (последний цвет = первому) и бесконечным rotate(360deg) за 5s — сквозь щель паддинга виден вращающийся градиент. Внутренний блок с тёмным фоном и радиусом на 2px меньше. По ховеру можно ускорять animation-duration.