HTML + CSSInputs
Center-out underline input
A single thin line under the text; on focus a gradient line opens out from the middle.
Settings
16px
1x
Code
<label class="uv-in2u"><input placeholder="Name"><i></i></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
No box, no background, just a line. That minimal look belongs on pages where the design does the talking: the contact form of a photographer’s portfolio, the newsletter field of an online magazine or an RSVP page for a wedding. The gradient line opening from the centre shows focus clearly. An underline input animation in CSS.
The resting line is very light, so check it on your real background; on pale colours you may need to darken it. It shines with two or three fields, less so on a long form where boxes are easier to scan.