CSS Generator für animierte Verlaufsrahmen

Ein rotierender Regenbogenrand sieht einfach aus, bis man versucht, einen in CSS zu bauen: Einen Winkel innerhalb von conic-gradient() mit einer einfachen Custom-Property zu animieren, bewirkt nichts Nützliches, weil der Browser nicht weiß, dass der Wert ein Winkel ist, und nicht zwischen 0deg und 360deg interpolieren kann – er springt nur. Dieser Generator verwendet die echte Lösung, die CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` teilt dem Browser genau mit, welche Art von Wert die Custom-Property enthält, und das ermöglicht eine flüssige, GPU-freundliche Interpolation innerhalb einer @keyframes-Regel.

Der Ring selbst ist ein ::before-Pseudoelement, das größer als die Box bemessen ist (Einzug um minus die Randbreite) und dessen Hintergrund auf `conic-gradient(from var(--border-angle), ...)` gesetzt ist und zur ersten Farbe zurückschleift, sodass der Durchlauf keine sichtbare Naht hat. Eine Maske übernimmt dann die eigentliche Formgebung: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` behält nur den ringförmigen Unterschied zwischen padding-box und content-box und verwirft das durchgehende Verlaufsrechteck überall sonst. Das ältere Safari-`-webkit-mask-composite: xor` führt die identische Operation aus und wird zusammen mit der Standard-Eigenschaft ausgeliefert, sodass der Effekt konsistent gerendert wird, statt auf einer Engine stillschweigend zu versagen.

Die Unterstützung von border-radius ist kein nachträglich obendrauf gesetzter Einfall – das `border-radius: inherit` des Pseudoelements bedeutet, dass jeder Radius, den Sie in die Box einstellen, automatisch auf den Ring übertragen wird. So erhält ein pillenförmiger Button oder eine abgerundete Karte einen abgerundeten leuchtenden Rand, statt dass gerade Kanten aus den abgerundeten Ecken herausbluten. Testen Sie es live: Ziehen Sie den Radius-Schieberegler von einem scharfen Rechteck zu einer vollen Pille und beobachten Sie, wie der Ring bei jedem Schritt der Form folgt – genau dieses Detail unterscheidet eine echte Implementierung dieser Technik von einem gefakten Screenshot.

Alles andere auf der Seite bildet sich direkt auf den generierten Code ab: Der Breitenregler bestimmt die Dicke des Rings sowie Einzug/Padding des Pseudoelements, der Dauerregler die animation-duration der @keyframes, der Richtungsschalter kehrt einfach das Vorzeichen des Endwinkels der Keyframes um (+360deg oder -360deg), und jeder Farbstopp ist ein durch Komma getrennter Eintrag innerhalb des conic-gradient()-Aufrufs. Das Ganze läuft in Ihrem Browser ohne Bilder, ohne JavaScript-gesteuerte Animationsschleife und ohne externe Dienste – kopieren Sie den CSS-Block und er dreht sich überall weiter, wo Sie ihn einfügen.