Design for AISpinning conic edge
Spinning conic edge: a CSS card. Copy the rules, or the prompt that rebuilds it.
Rotating edge
A conic gradient spins around the card using a registered custom property.
CSS
@property --card-034-a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg
}
.card-034 {
width: 280px;
padding: 2px;
border-radius: 16px;
background: conic-gradient(from var(--card-034-a),#22d3ee,#a78bfa,#f472b6,#22d3ee);
animation: card-034-spin 4s linear infinite;
font-family: system-ui,sans-serif
}
.card-034:hover {
animation-duration: 1.5s
}
.card-034__in {
padding: 22px;
border-radius: 14px;
background: #0f172a;
color: #f1f5f9
}
.card-034 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-034 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #94a3b8
}
@keyframes card-034-spin {
to {
--card-034-a: 360deg
}
}
@media (prefers-reduced-motion: reduce) {
.card-034, .card-034 * { animation: none; transition: none; }
}
HTML
<div class="card-034">
<div class="card-034__in">
<h3>Rotating edge</h3>
<p>A conic gradient spins around the card using a registered custom property.</p>
</div>
</div>Prompt
Build a 280px card with an animated 2px gradient border. Outer wrapper has 2px padding, 16px radius and a conic-gradient background (from a registered @property angle --a, colors #22d3ee, #a78bfa, #f472b6, back to #22d3ee) that animates the angle from 0 to 360deg over 4s linear infinitely; on hover the rotation speeds up to 1.5s. Inner panel is #0f172a with 14px radius and 22px padding, 18px white title, 14px #94a3b8 text.