CSS Animated Gradient Border Generator

A rotating rainbow border looks simple until you actually try to build one in CSS: animating an angle inside conic-gradient() with a plain custom property does nothing useful, because the browser has no idea the value is an angle and cannot interpolate between 0deg and 360deg — it just jumps. This generator uses the real fix, the CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` tells the browser exactly what kind of value the custom property holds, which is what unlocks smooth, GPU-friendly interpolation across a @keyframes rule.

The ring itself is a ::before pseudo-element sized larger than the box (inset by minus the border width) with its background set to `conic-gradient(from var(--border-angle), ...)` looping back to the first color so the sweep has no visible seam. A mask then does the real shaping work: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` keeps only the ring-shaped difference between the padding-box and the content-box, discarding the solid gradient rectangle everywhere else. Safari's older `-webkit-mask-composite: xor` performs the identical operation and ships alongside the standard property, so the effect renders consistently rather than failing silently on one engine.

Border-radius support is not an afterthought bolted on top — the pseudo-element's `border-radius: inherit` means whatever radius you dial into the box is carried onto the ring automatically, so a pill-shaped button or a rounded card gets a rounded glowing border instead of straight edges bleeding out of curved corners. Test it live: drag the radius slider from a sharp rectangle to a full pill and watch the ring follow the shape at every step, which is the detail that separates a real implementation of this technique from a fake screenshot.

Everything else on the page maps directly onto the generated code: the width slider is the ring's thickness and the pseudo-element's inset/padding, the duration slider is the @keyframes animation-duration, the direction switch just flips the sign of the keyframe's end angle (+360deg or -360deg), and each color stop is a comma-separated entry inside the conic-gradient() call. The whole thing runs in your browser with no images, no JavaScript-driven animation loop and no external services — copy the CSS block and it keeps spinning wherever you paste it.