Animated Gradient Border
A card wrapped in a rotating conic-gradient border — pure CSS, no images.
<div class="gb"><div class="gb-inner"><h3>Gradient Border</h3><p>An animated conic-gradient border that rotates around the card.</p></div></div>body{background:#0d1426}
.gb{position:relative;width:300px;border-radius:18px;padding:2px;overflow:hidden}
.gb::before{content:'';position:absolute;inset:-50%;background:conic-gradient(#ff7a18,#ff477e,#5b6cff,#00d4ff,#ff7a18);animation:spin 4s linear infinite}
.gb-inner{position:relative;background:#121a2e;border-radius:16px;padding:26px;color:#fff;font-family:system-ui,sans-serif}
.gb-inner h3{margin:0 0 8px}.gb-inner p{margin:0;color:#9fb0d0;line-height:1.6;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.