Gradient Ring
No library Advanced
On focus a conic-gradient border continuously rotates around the input using a @property CSS custom property (--gr-angle) animated from 0deg to 360deg. The ring fades in with opacity and fades out on blur.
On focus a conic-gradient border continuously rotates around the input using a @property CSS custom property (--gr-angle) animated from 0deg to 360deg. The ring fades in with opacity and fades out on blur.
Goal: Create a "Gradient Ring" input animation.
Visual behavior: On focus, a spinning conic-gradient border continuously rotates around the input like a rainbow halo. The ring fades in (opacity 0 → 1) on focus and fades out on blur. While visible, it rotates at a steady 2s per revolution. The input itself sits on top with a solid background so the gradient only shows as a ring (2px around the edges).
Technique:
- Declare a @property rule for --gr-angle: syntax '<angle>', inherits: false, initial-value: 0deg
- Keyframe: @keyframes gr-spin { to { --gr-angle: 360deg; } }
- The ring div: position absolute; inset: -2px; border-radius slightly larger than input; background: conic-gradient(from var(--gr-angle), color-stops); animation: gr-spin 2s linear infinite
- Wrapper: position: relative; the ring div sits behind the input (z-index: 0); input is z-index: 1
- Ring opacity: 0 at rest, 1 on focus — transition: opacity 250ms ease
- Input: background solid (not transparent) to mask the gradient, leaving only the 2px ring visible
- Inject the @property and @keyframes via a <style> tag in useEffect
Accessibility: animation: none on the ring under prefers-reduced-motion. A static gradient ring (no spin) is still shown for focus indication.
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.