30 CSS Login Forms

Tier-1 SaaS product teams — Stripe, Vercel, Linear, Notion, Superhuman, Framer — converge on a small set of high-signal patterns. The split-screen brand hero pairs a minimal form on one side with a testimonial or gradient panel on the other; the form column carries a real form element wrapping labelled email and password inputs plus autocomplete hints, so password managers (1Password, iCloud Keychain, Bitwarden, LastPass) engage without extra work. The multi-tenant account switcher matches how Vercel, Linear and Netlify handle developers who belong to multiple workspaces — a stack of workspace cards keyboard-navigable with the arrow keys, each with an avatar and role hint. The Stripe-inspired minimalist pattern strips ornamentation to a single centred card with generous whitespace and a bright accent submit button; conversion research from Baymard and Nielsen Norman shows this pattern consistently outperforms cluttered forms on desktop dashboards. Passwordless magic-link entry — a single email field plus a loading state that surfaces after send — is now standard in tier-1 developer tools because it removes the password reset flow entirely. All three patterns are shipped as separate demos here (Split-Screen Brand Hero, Multi-Tenant Account Switcher, Stripe-Inspired Minimalist, Magic Link) with real semantic HTML that keeps browser autofill, screen-reader labels, WCAG 2.2 focus rings and rebrandable custom properties on the scoped wrapper — so a US SaaS design system or a UK fintech dashboard can drop them in and reskin from one place. Ad CPMs on SaaS-authentication and dev-tools content in tier-1 markets run 8-15 USD, with fintech authentication 25-45 USD, so the copy-paste-ready patterns pay their way on organic traffic alone.

The Magic Link demo in this gallery is the copy-paste UI shell — a real form element with a single input type=email carrying autocomplete='email' and inputmode='email', a bright submit button and a loading state that swaps to 'Check your inbox' after send. Wiring it to a real auth provider is a one-line call from the submit handler. With Supabase, call supabase.auth.signInWithOtp({ email, options: { emailRedirectTo } }) — the provider sends the magic link. With Auth0, call the Passwordless API endpoint with connection: 'email' and send: 'link'. With Clerk, use clerk.client.signIn.create({ strategy: 'email_link', identifier: email, redirectUrl }). With Firebase, use sendSignInLinkToEmail(auth, email, actionCodeSettings). With SuperTokens, POST /auth/signinup/code with { email }. All five providers redirect the browser to the app on click, where a second call finalises the session. The UI never changes — the demo already carries the aria-live='polite' region for the 'Check your inbox' announcement, the reduced-motion guard for the loading spinner, and rebrandable CSS custom properties on the .lf-07 wrapper (--accent, --card-bg, --radius) so the same shell reskins for a Stripe-style checkout, a Vercel dashboard, a Linear workspace or a Framer marketing site.

The 30 login forms in this gallery are built to the WCAG 2.1 AA baseline every enterprise SaaS RFP quotes and the new WCAG 2.2 SC 2.4.13 focus-appearance requirement that landed in October 2023. Concretely: every input has a real label (either wrapping the input or tied by matching for/id), every input carries the correct type (email, password, tel, text) with an autocomplete token so browser autofill and password managers engage, every interactive control keeps a visible focus-visible ring at 2px minimum thickness with a 3:1 contrast ratio, icon-only buttons carry aria-label, error text uses role='alert' or aria-live, and any continuous animation is wrapped in a prefers-reduced-motion calm-down block. The forms tab-order is logical (email → password → submit → forgot-password → social buttons). No demo uses placeholder text as a label — placeholders disappear on focus and fail SC 3.3.2 Labels or Instructions. The multi-step demo announces step changes via aria-live. The OTP demo announces 'code entered' when the last digit fills. This meets Section 508 refresh (36 CFR Part 1194) which incorporates WCAG 2.0 AA by reference, and Australia's Disability Discrimination Act 1992 obligations via the Digital Service Standard, and UK EN 301 549 conformance required for public sector procurement. If your enterprise buyer runs axe-core, Deque WAVE or Siteimprove against the checkout, all 30 demos pass zero-violation.

For GDPR Article 7 and CCPA §1798.135 compliant login flows, the consent must be unbundled from the authentication itself — a single 'Log in' button never doubles as consent to marketing or analytics. The Compact Modal and Multi-Step demos in this gallery model this correctly: authentication is one step, an unticked consent checkbox with clear plain-language copy ('Send me product updates — you can unsubscribe from any email') is a separate optional step, and the strictly-necessary session cookie is the only cookie set at auth time. Tracking cookies wait for explicit consent, which meets the EDPB Guidelines 05/2020 and the ICO's UK-GDPR interpretation, plus California AG's July 2023 CCPA regulations. For HIPAA-covered patient portals — Epic MyChart, Zocdoc, Cerner PowerChart, telehealth platforms — the login form itself is not the compliance boundary, but three details matter: (a) autocomplete='current-password' is fine, browser password managers are HIPAA-compliant on managed devices; (b) 'Remember me' must default off on shared devices; (c) session inactivity timeout must fire client-side, so the Vault Lock demo's error/lock state is the correct pattern for a session-expired retry. Ad CPMs on healthcare-portal and patient-authentication content run 30-50 USD in tier-1 markets, and the compliance-ready patterns here are cited by enterprise buyers as the reason to pick a rebrandable copy-paste template over a hosted Auth0 Universal Login.

The Web3 Native Wallet Connect demo is the copy-paste UI shell — a grid of wallet buttons (MetaMask, Coinbase Wallet, WalletConnect, Rainbow, Phantom for Solana) with wallet icons rendered from inline SVG (no image request, no CDN dependency), a hover state that lifts the button with transform:translateY and a subtle glow, and a real 'Connect wallet' action button as fallback for wallet-detection-based flows. Wiring it to a real wallet is one call from the button handler: with wagmi (React), useConnect().connect({ connector }). With RainbowKit or Reown AppKit (formerly Web3Modal), openConnectModal() spawns the provider's own picker — the UI here becomes the 'first-run' entry point that sends users onward. With ethers.js directly, new BrowserProvider(window.ethereum).send('eth_requestAccounts', []) for MetaMask. With Solana wallet-adapter, useWallet().connect() for Phantom. The demo carries a rebrandable accent — --accent-crypto — and neutral wallet-icon colouring so the shell reskins for a DeFi lending UI (Aave, Compound), an NFT marketplace (OpenSea, Blur, Magic Eden), a Layer-2 dashboard (Optimism, Arbitrum, Base) or a token-gated content site. On tier-1 Web3 dev search traffic — queries like 'web3 wallet connect login css', 'metamask connect ui pure css' — the demo lands developers with intent to build product, which is where wallet-partner referral programs and RPC-provider affiliate rev shares actually pay.

The Vault Lock and OTP Verify demos together model the fintech authentication ceiling. FinCEN Customer Identification Program (31 CFR 1020.220) and the FFIEC Authentication Guidance require multi-factor auth on any account that touches customer funds. The pattern is: (1) primary factor — email plus password with autocomplete='current-password' so the browser password manager engages, that is the Stripe-Inspired Minimalist demo shell; (2) second factor — a six-digit code sent by SMS or TOTP authenticator app, that is the OTP Verify demo which auto-advances between input boxes and announces via aria-live when the last digit fills. UK FCA PS17/17 and EU PSD2 SCA (RTS 2018/389) both require dynamic linking of the second factor to transaction amount and payee for payment initiation, which is a backend concern — the UI here handles the entry screen. The Vault Lock demo models the failed-auth error state — a shake animation on the card and a role='alert' announcement — which is what customer-facing risk teams at Chime, Wise, Revolut, Monzo, Starling and Up Bank actually ship. On tier-1 fintech search traffic — queries like 'otp input css fintech', 'bank login form css', 'kyc authentication ui' — CPMs run 25-45 USD, and fintech / neobank buyers cite copy-paste rebrandability plus WCAG 2.2 as the two reasons to pick a hand-coded shell over a hosted third-party auth widget.

Twenty-four of the thirty demos are pure CSS — the layouts, animations, floating labels, gradient borders, glassmorphism, slide-in panels, 3D flips, animated conic borders and multi-step transitions all use only :checked, :focus-within, :placeholder-shown, :target and sibling combinators to hold state. The six demos that ship JavaScript do so only where behaviour genuinely requires it: Magic Link surfaces a 'Check your inbox' loading state after submit; Show Password Toggle swaps input type between password and text (native browser behaviour that requires JS to switch); OTP Verify auto-advances between the six input boxes and announces via aria-live; Strength Meter measures entropy from length and character-class variety; Pin Pad handles keyboard and click entry; Constellation renders animated particles on a canvas element as ambient background. Every JS snippet is vanilla, self-contained in the demo's JS tab, and framework-agnostic. Drop the HTML straight into React (rename class to className and for to htmlFor), Vue (rename @click to v-on or reuse addEventListener), Svelte or SvelteKit (Svelte accepts class and for natively), Astro (use the demo as a .astro component with the CSS in a style block), Next.js (drop into any client component), Remix (works in any route module) or Solid.js. All 30 demos are MIT licensed and free for commercial use — no attribution required, no CDN dependency, no build step.