The checkout-grade input: white field lifted off the page by a soft shadow instead of a hard border, with a calm blue ring that fades in on focus. Feels secure enough to type a card number into.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build Stripe-style elevated input fields.
1. Resting state: white background, NO visible border — depth comes from a layered shadow: 0 1px 1px #00000008, 0 3px 6px #00000005.
2. Radius: 6px. Height: 44px. Padding: 12px horizontal. Font: 16px (prevents iOS zoom).
3. Focus: a 4px soft ring in #4F46E547 plus a 1px inner border in #4F46E5, transitioned over 150ms.
4. Label: 14px, #0F172A, 6px above the field. Placeholder: #64748B — never use placeholder as the label.
5. Error: ring and border switch to #DF1B41, with a 13px error message below.
6. Fields sit on an off-white page background (#F8FAFC) so the white elevation reads.The checkout-grade input: white field lifted off the page by a soft shadow instead of a hard border, with a calm blue ring that fades in on focus. Feels secure enough to type a card number into.
Click into the fields and type — focus rings, label motion and error states are live.
Click into the fields and type — focus rings, label motion and error states are live.