# Rotierende Conic-Kante (C 034)

Kategorie: Cards  
Tags: gradient-border, conic, animated, dark, property  
Seite: https://designforai.dev/de/snippet/card-034

## Prompt

Baue eine 280px Card mit animiertem 2px Gradient-Rahmen. Der äußere Wrapper hat 2px Padding, 16px Radius und einen conic-gradient Hintergrund (ab einem registrierten @property Winkel --a, Farben #22d3ee, #a78bfa, #f472b6, zurück zu #22d3ee), der den Winkel über 4s linear endlos von 0 auf 360deg animiert; beim Hover beschleunigt die Rotation auf 1.5s. Das innere Panel ist #0f172a mit 14px Radius und 22px Padding, 18px weißer Titel, 14px #94a3b8 Text.

## HTML

```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>
```

## CSS

```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; }
}
```