CSS12 · גבול גרדיאנט מסתובב

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS12 · גבול גרדיאנט מסתובב */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.gb{position:relative;width:min(340px,80vw);margin-inline:auto;border-radius:18px;padding:2px;
background:conic-gradient(from var(--ang),var(--accent, #4a3aff),#c2255c,#e8590c,var(--accent, #4a3aff));
animation:rot 3.5s linear infinite}
@keyframes rot{to{--ang:360deg}}
.gb-in{background:var(--card, #fff);border-radius:16px;padding:30px;text-align:center}
.gb-in h3{margin:0 0 6px}
.gb-in p{margin:0;color:var(--muted, #6a6d85);font-size:14px}
@media(prefers-reduced-motion:reduce){.gb{animation:none}}

HTML

<div class="stage tight"><div class="gb"><div class="gb-in"><h3>הכרטיס המודגש</h3><p>הגבול מסתובב סביבי בלי סוף.</p></div></div></div>