Gradient Border
No library Intermediate
A full-spectrum rainbow conic gradient spins continuously around the button border using a CSS @property animated angle. Pure CSS, no dependencies.
A full-spectrum rainbow conic gradient spins continuously around the button border using a CSS @property animated angle. Pure CSS, no dependencies.
Goal: Create a "Gradient Border" button animation.
Visual behavior: The button is wrapped in a 1px-padded div whose background is a conic-gradient cycling through rose → orange → yellow → green → blue → violet → rose. The gradient angle is animated from 0deg to 360deg over 3s using a CSS @property custom property (--btn-border-angle), making the rainbow appear to spin continuously around the border. The inner button has a near-black background, creating contrast.
Technique: Register @property --btn-border-angle with syntax '<angle>' and initial-value 0deg. A wrapper div uses this property in a conic-gradient background with 1px padding and matching border-radius (outer 10px, inner 9px). An @keyframes animates --btn-border-angle to 360deg over 3s linear infinite.
Accessibility: Animation paused under prefers-reduced-motion. Focus ring preserved on the inner button.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.