HTML + CSSInputs
Spinning gradient field
While the field is active, a two-colour gradient border slowly spins around it.
Settings
16px
1x
Code
<label class="uv-in2g"><input placeholder="Search projects"></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
A spinning gradient border draws the eye to one important field: the prompt box of an AI tool, the project search in a dashboard or the “Enter your domain” field on a hosting landing page. When you click away, the border goes quiet again. An input with an animated gradient border, in CSS only.
Use it for a single hero field per page. If every input spins, the form looks like a slot machine. Two colours from your brand palette are enough; a rainbow gradient gets noisy fast.