24 Pure CSS6 Light JSPublished 6 new designs · Updated on
30 CSS login form designs for SaaS and B2B account entry, fintech and secure-storage sign-in, Web3 wallet connect, and consumer social onboarding — spanning split-screen brand heroes, floating-label and magic-link inputs, glassmorphism and neon dark modes, OAuth and biometric prompts, OTP grids, PIN pads, password strength meters, and inline validation. Scoped under .lf-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Designing the whole screen, not just this section?
You just browsed 30 login forms. Untitled UI is the Figma UI kit 380,000+ designers use: 10,000+ components and 420+ ready page examples in Pro, with a matching React library on Tailwind CSS. Figma Pro is a one-time purchase from $129.
The high-conversion SaaS classic: a 50/50 desktop split with an isolated minimal form on one side and a branded panel — headline, testimonial, abstract gradient mesh — on the other. Collapses to a single clean column on mobile.
The B2B enterprise entry screen (think Slack or AWS): a returning user picks which workspace / client org to enter from a stack of profile cards, each with an avatar and a role badge, plus a link to add another account.
The Material-modern favourite: the placeholder text sits inside the field, then glides up to a miniaturised top label the moment the field is focused or filled — done entirely in CSS, no JavaScript trackers.
The non-traditional auth flow for crypto / AI toolkits: a tidy grid of third-party connection tiles — MetaMask, WalletConnect, Coinbase, Ledger — with strict, uniform bounding boxes and a crisp hardware-accelerated lift on hover.
Crisp, flat, geometric fintech excellence: high-contrast type, generous field padding, and the signature two-layer soft shadow that makes a card float just enough. Zero fluff, all polish.
OAuth-first done right: prominent Google and GitHub buttons up top with crisp inline SVG logos, an "or continue with email" divider, and the email field tucked neatly beneath for those who want it.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The hyper-minimalist single-field entry (Linear / Substack): one email input and a Send Magic Link button. On submit it swaps to a loading state and then a clean check-your-inbox confirmation — all at a fixed height so nothing jumps.
The indie-startup landing look: colourful, blurred atmospheric shapes drift behind a clean login card like a soft aurora. High aesthetic impact, engineered to stay smooth on mobile.
A dark-mode-first, retro-gaming login glowing with disciplined neon: multi-layered text shadows and a tight box glow that says arcade without wrecking contrast or legibility.
One window, two workflows: Login and Sign Up live side by side and a coloured overlay glides across to reveal whichever you need — the classic dual-panel auth, driven entirely by a hidden checkbox and a CSS transition.
The Forgot Password lives on the back of the login card. Click the reset link and the whole card rotates in 3D to reveal the recovery form — no page redirect, no glitchy bleed-through.
An authentic CLI login for dev-tools, dev-ops panels and security apps: monospaced type, a traffic-light window bar, a blinking block cursor, and raw prompt-style inputs with no chrome.
An ultra-compact login widget that floats above app content like a modular control card — fully pill-shaped, docked to the bottom-centre of the viewport, ideal for mobile web overlays.
A dark-mode SaaS card wrapped in a fine multi-colour gradient hairline — achieved without nested wrapper divs, using the modern border background-clip trick for a crisp, single-element frame.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Log-in as a slide-over: clicking Sign in glides a panel in from the right edge over a dimmed backdrop, without routing away from the active storefront page — the e-commerce and content-hub pattern.
Consumer-mobile onboarding that leads with big, brand-compliant social sign-in blocks — Apple, Google, Facebook — stacked full-width for instant one-tap entry, with the email path pushed politely below.
A playful character sits above the form and reacts to the user: its eyes follow the email field and its hands shoot up to cover its eyes the moment the password field is focused — the friendly, conversion-boosting login, all in CSS.
A light pop-up auth dialog for media and membership sites: a small centred card scales in over blurred page content when triggered — accessibility-first, with proper focus rings and a semantic dialog structure.
The glassmorphism login for high-end creative apps: a frosted translucent card floating over a rich image-style backdrop, with a real blur, a fine light-edge border, and text layers kept readable.
A multi-stage sign-in that lowers upfront resistance: step 1 takes the email, step 2 the password, step 3 a security code — inactive cards slide off-screen smoothly, all driven by radios and a translated track.
A glowing conic-gradient light continuously rotates around the login card's edge — the fast-moving-tech accent — rendered on the GPU via an animated custom property so it never stutters the desktop.
An ironclad, industrial login for banking and secure-storage apps: flat metallic tones, geometric borders, a lock crest, and a crisp crimson error state that flashes when a field is left invalid.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Raw neo-brutalism for agencies and portfolios: thick black borders, hard offset drop shadows with zero blur, monospace type, and a satisfying press effect where the card slams down onto its shadow.
The everyday accessibility win: an eye button inside the password field flips it between hidden and visible so users can catch typos — with the icon absolutely positioned so typed characters never slide under it.
The multi-factor confirmation screen: six evenly-sized digit boxes in a grid that auto-advance as you type, accept a full paste, and backspace back — the standard email / SMS code entry, done accessibly.
A sign-up password field with a live entropy estimate: a segmented bar and a word label update as the user types, transitioning from red through amber to green — reassuring, standard, and accessible.
A numeric PIN entry for kiosks, POS terminals and mobile web: a rigid 3×4 keypad of big round touch buttons feeding a row of masked dots, with a satisfying press state and a delete key.
Enterprise-grade instant feedback: each field shows a green tick when valid and a red hint when not — driven entirely by native CSS validation pseudo-classes, so no keystroke JavaScript is needed.
A creative-agency / AI-dashboard login floating over an interactive particle field: drifting stars link into a constellation and lean toward the pointer, while the form card sits cleanly above without swallowing clicks.
A PWA-style face / touch-ID prompt: a large centred biometric glyph with soft concentric pulse ripples signalling the app is listening — the clean, minimal native-feel authentication moment.
↗
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
What login form patterns actually convert for SaaS authentication in the US, UK, Canada and Australia?
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.
How do I build a passwordless email magic-link login form that works with Supabase, Auth0, Clerk, Firebase or SuperTokens?
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.
How do I build a WCAG 2.1 / WCAG 2.2 accessible login form that passes an enterprise a11y audit or a US federal Section 508 review?
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.
Which login form patterns match the compliance requirements for GDPR (EU/UK), CCPA (California) and HIPAA (US healthcare)?
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.
How do I build a Web3 wallet-connect login (MetaMask, Coinbase Wallet, WalletConnect, Rainbow, Phantom) as a pure-CSS UI shell?
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.
How do I build a fintech / banking KYC login form that meets US FinCEN CIP requirements, UK FCA rules, EU PSD2 SCA and Australian ASIC standards?
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.
Do these login forms need JavaScript, and can I use them in React, Vue, Svelte, Astro, Next.js, Remix or SvelteKit?
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.
