Gradient Login Form

Features

• Design-system shape mapping includes --card-hero-radius | --cards-radius | Design-system card corner radius, --cards-radius | Login card radius, and --inputs-radius | Email and password inputs.
• Full-viewport 135deg gradient hero (purple → violet → blue) composed from design tokens, with a deep-plum dark variant
• White card floating on the gradient with a generous radius and a large soft drop shadow
• Inline brand logo SVG that recolors from the primary token in both themes
• Filled inputs with leading email / lock icons and floating labels that dock onto the card surface when focused or filled
• Real-time validation with inline error messages for email format and password length
• Errors appear only after a field is touched, then re-validate on every keystroke
• Password visibility toggle with eye / eye-off Tabler icons and aria-pressed state
• Social sign-in buttons (Google, Apple) with an ARIA live status response
• Submit gated by validation — focus jumps to the first invalid field on failure
• Accessible: ARIA live regions, aria-invalid, focus-visible indicators, reduced-motion support
• Responsive: stacks social buttons and footer actions below 480px

Accessibility

Error messaging

aria-describedby per input plus aria-live="polite" error elements

Invalid state

aria-invalid toggled on inputs as validation runs

Status line

aria-live="polite" announces sign-in and social responses

Visibility toggle

<button> with aria-label and aria-pressed

Input labels

<label for> association on both fields

Focus management

Focus moves to the first invalid field on failed submit

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Gradient Login Form in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the login is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.