Created by Aigars Silkalns for Colorlib
A curated collection of beautiful, responsive login form templates built with pure HTML, CSS, and JavaScript. Each form has independent styling and uses a small shared JavaScript helper, ready to copy into other projects.
Looking for more amazing form designs? Check out Colorlib's extensive collections:
- 📋 Login Forms Collection - Browse hundreds of login form designs
- 🎨 HTML5 & CSS3 Login Forms - Modern form templates and tutorials
- Pure HTML/CSS/JS — no frameworks, no build step, no runtime packages
- Copy-paste ready — copy
forms/<name>/together withshared/js/form-utils.jsinto any project - Shared
LoginFormBaseclass — every form inherits validation, lifecycle, and accessibility behavior from one place; per-form scripts configure design hooks without duplicating validation - Responsive — mobile-first across all 40 designs
- Accessible by default —
:focus-visiblekeyboard rings,prefers-reduced-motionhonored globally, ARIA on icon controls, semantic markup - SEO + social ready — meta description, Open Graph, Twitter card, and SVG favicon on every form
- No external dependencies — works fully offline, no CDN, no Google Fonts
- Cross-browser — Chrome 88+, Firefox 103+, Safari 15.4+, Edge 88+
The gallery supports searching names, descriptions, and features, combined with category filtering. Filtered URLs can be bookmarked or shared. Clear filters restores the full collection.
Use Favorite on any card to save it in this browser. Show → My favorites combines with search and category filters. Compare favorites opens the first two saved designs in gallery order; both preview selectors put favorites first and always include the complete collection of 40 original and newer designs, grouped by category. Select another favorite to compare a different pair.
Share favorites copies a portable shortlist link, with a selectable manual-copy
field if clipboard access is unavailable. For example:
?shortlist=basic,neon,corporate&collection=shortlist.
Incoming lists open under Show → Shared shortlist without changing your saved
favorites. Save shared shortlist merges them into your own favorites;
Compare shortlist previews the first two. Unknown/duplicate slugs are ignored.
Shortlist links retain preview screen/device/pair settings and clear search/category
filters so recipients see the whole list. Preview links also retain shared lists.
Favorites sync between tabs; blocked storage keeps them for the current visit with
a clear message and sharing still works. Only design slugs are saved locally.
Named lists let you keep multiple collections alongside favorites. Choose New list, enter a name (up to 60 characters), and select Create list. It starts with the current favorites, shared shortlist, or selected named list; with no favorites it starts empty. Names must be nonempty and unique, ignoring case. Choose a list under Named list to filter the gallery to its members. Use Add forms to browse all 40 designs, then use each card's Add to / Remove from button to edit that list. Return via Show → Selected named list. Favorites remain separate. Rename changes the name; Delete asks for confirmation and removes only that named list. Cancel/Escape closes the name editor without saving. Named lists persist locally and update across tabs.
Share list includes its name and forms in a portable link such as
?shortlist=basic,neon&collection=shortlist&name=Client%20project.
Recipients can use New list to save their own named copy, with the shared name
prefilled. Existing local lists are never replaced by incoming links. Compare
list starts with its first two members in gallery order; both selectors still
include every design. Copying a preview link also includes the complete named
collection and the chosen pair, screen, and viewport. Empty lists cannot be
shared, and comparisons require two members. If browser storage is unavailable,
lists remain usable for the visit and sharing still works. Only list names, form
slugs, and a local selection ID are stored; no form entries are saved.
Choose Live preview on a card to try the form at desktop (1100 × 800) or mobile (375 × 812) size. Use the Screen selector to explore Sign in, Sign up, Reset password, and New password. It follows links inside the demo, including both reset steps. The preview scales to fit, keeps entered values when resizing, and starts fresh when changing screens. Loading and ready states are announced, and Close or Escape returns focus to the gallery card. Only one selected screen per form is loaded; no credentials are saved by the gallery.
Choose Download ZIP to get a complete standalone folder containing index.html, sign-up.html, reset-password.html, new-password.html, style.css, script.js, form-utils.js, and a package README. Extract the whole folder and open index.html; the shared script is already included at the correct path. Downloads and direct demo links remain usable without gallery JavaScript.
Choose a First form and a different design under Compare with to view two forms side by side. One screen selector and desktop/mobile toggle control both previews, including links followed inside either form. Each form keeps its own entered values when resizing; credentials are never copied between forms. Both panes have ZIP downloads. On a narrow browser, scroll the labeled preview region sideways to keep both designs readable. Choose No comparison to unload the second form. No extra form is fetched until selected, and at most two are loaded.
A comparison can be shared with the same Copy link action:
Basic and Neon, mobile sign-up comparison
The optional compare parameter names the second form. Unknown or duplicate
selections fall back to a single preview. Old single-preview links still work.
Use Copy link in the preview header to share the selected design, screen, and desktop/mobile view. The address bar also stays current, so bookmarking or copying it works. For example:
Links preserve gallery search/category filters and reopen the preview after reload,
even when those filters hide its card. Screen values are signin, signup,
request-reset, and new-password; device values are desktop and mobile.
Unknown forms are ignored and invalid screen/device values fall back to safe defaults.
Closing removes the preview parameters while retaining filters. Back returns to the
gallery and Forward reopens the selected view, without a separate history step for
each screen change. No entered email addresses or passwords are added to links or
saved by the gallery. Clipboard access is optional: when unavailable, a labeled,
selected link appears for manual copying. Keep links on your gallery's hosted URL;
a localhost or local-file link only works where that address is accessible.
Glassmorphism Frosted glass effects Live Demo | Source |
Neon Minimalist Dark theme with neon Live Demo | Source |
Gradient Wave Animated gradients Live Demo | Source |
Neumorphism Soft UI design Live Demo | Source |
Corporate Professional Enterprise-grade Live Demo | Source |
Material Design Google's Material UI Live Demo | Source |
Basic Form Clean & simple Live Demo | Source |
Minimal Clean Ultra-minimal design Live Demo | Source |
Creative Portal Interactive animations Live Demo | Source |
Eco Wellness Nature-inspired Live Demo | Source |
AI Assistant Neural network theme Live Demo | Source |
Neon Cyber Cyberpunk aesthetic Live Demo | Source |
Soft Minimalism Warm & organic Live Demo | Source |
Retro Future Y2K revival style Live Demo | Source |
Minimal Music Spotify-inspired Live Demo | Source |
Travel Booking Travel industry theme Live Demo | Source |
Clean Banking Fintech design Live Demo | Source |
Modern SaaS Stripe-inspired Live Demo | Source |
Elegant Portfolio Creative professional Live Demo | Source |
Brutalist Bold & minimal Live Demo | Source |
These original CSS/SVG compositions draw on editorial, architecture, music, art, and retail references. See research and composition notes for the Framer/Dribbble references and design decisions. Every design includes all four account screens, live previews/comparisons, favorites, and a standalone ZIP.
| Design | Preview | Composition |
|---|---|---|
| Folio Editorial | Screenshot | Editorial membership portal with a narrow ink rail, oversized serif type, and a numbered issue stamp. |
| Swiss Grid | Screenshot | A vermilion Swiss poster, strict numbered rules, compressed headlines, and an open form column. |
| Architecture Blueprint | Screenshot | Architectural drawing sheet with a measured cobalt grid, elevation lines, and a technical sidebar. |
| Ceramic Studio | Screenshot | An earthy ceramics studio with a sculptural vessel still life and quiet, rounded authentication fields. |
| Film Darkroom | Screenshot | A photographic darkroom with a perforated film strip, abstract exposures, amber contact-sheet labels, and a dark form. |
| Botanical Index | Screenshot | An olive specimen catalogue with oversized botanical linework, inventory labels, and an airy off-white form. |
| Audio Console | Screenshot | A mint-on-charcoal recording desk with stereo meters, physical faders, and a studio access panel. |
| Museum Ticket | Screenshot | A ticket-shaped access panel with a perforated seam, exhibition typography, and a large abstract exhibition print. |
| Atelier Fashion | Screenshot | A fashion house invitation with plum paper, expressive serif type, an abstract folded garment, and a spare cream form. |
| Cobalt Orbit | Screenshot | A cobalt orbital diagram wraps a circular brand field, paired with a crisp floating authentication panel. |
| Terrace Travel | Screenshot | A warm Mediterranean landscape with stepped terraces, an oversized sun, and a passport-like inset form. |
| Terminal Cloud | Screenshot | A developer workbench with a real-looking static command transcript, status dots, and a compact cloud access panel. |
| Paper Notes | Screenshot | A ruled paper desk with layered notes, a hand-drawn loop, and a lemon-yellow writing pad for the form. |
| Racing Paddock | Screenshot | Motorsport timing-board typography, an oversized racing number, a checkered finish band, and sharp edged controls. |
| Bauhaus Workshop | Screenshot | A primary-color workshop of geometric tiles with a freestanding form and deliberate asymmetry. |
| Mono Journal | Screenshot | A full-width newspaper masthead, oversized issue number, editorial columns, and a reader access form. |
| Gallery Frame | Screenshot | An art-gallery wall with a floating framed color study, exhibition captions, and a cool white access column. |
| Terra Maps | Screenshot | A field journal with contour-map linework, a waypoint marker, and a sand-colored inset expedition form. |
| Citrus Market | Screenshot | A neighborhood market with hand-cut citrus shapes, a green checkered tablecloth, and a receipt-style login. |
| Kinetic Type | Screenshot | A saturated pink type specimen with offset oversized letterforms, a red margin rail, and a compact off-white form. |
- Folio Editorial — Editorial membership portal with a narrow ink rail, oversized serif type, and a numbered issue stamp.
- Swiss Grid — A vermilion Swiss poster, strict numbered rules, compressed headlines, and an open form column.
- Architecture Blueprint — Architectural drawing sheet with a measured cobalt grid, elevation lines, and a technical sidebar.
- Ceramic Studio — An earthy ceramics studio with a sculptural vessel still life and quiet, rounded authentication fields.
- Film Darkroom — A photographic darkroom with a perforated film strip, abstract exposures, amber contact-sheet labels, and a dark form.
- Botanical Index — An olive specimen catalogue with oversized botanical linework, inventory labels, and an airy off-white form.
- Audio Console — A mint-on-charcoal recording desk with stereo meters, physical faders, and a studio access panel.
- Museum Ticket — A ticket-shaped access panel with a perforated seam, exhibition typography, and a large abstract exhibition print.
- Atelier Fashion — A fashion house invitation with plum paper, expressive serif type, an abstract folded garment, and a spare cream form.
- Cobalt Orbit — A cobalt orbital diagram wraps a circular brand field, paired with a crisp floating authentication panel.
- Terrace Travel — A warm Mediterranean landscape with stepped terraces, an oversized sun, and a passport-like inset form.
- Terminal Cloud — A developer workbench with a real-looking static command transcript, status dots, and a compact cloud access panel.
- Paper Notes — A ruled paper desk with layered notes, a hand-drawn loop, and a lemon-yellow writing pad for the form.
- Racing Paddock — Motorsport timing-board typography, an oversized racing number, a checkered finish band, and sharp edged controls.
- Bauhaus Workshop — A primary-color workshop of geometric tiles with a freestanding form and deliberate asymmetry.
- Mono Journal — A full-width newspaper masthead, oversized issue number, editorial columns, and a reader access form.
- Gallery Frame — An art-gallery wall with a floating framed color study, exhibition captions, and a cool white access column.
- Terra Maps — A field journal with contour-map linework, a waypoint marker, and a sand-colored inset expedition form.
- Citrus Market — A neighborhood market with hand-cut citrus shapes, a green checkered tablecloth, and a receipt-style login.
- Kinetic Type — A saturated pink type specimen with offset oversized letterforms, a red margin rail, and a compact off-white form.
- Glassmorphism - Frosted glass effects with backdrop blur
- Neon Minimalist - Dark theme with glowing neon accents
- Gradient Wave - Dynamic gradient animations
- Neumorphism - Soft UI with realistic shadows
- Corporate Professional - Enterprise-grade with SSO integration
- Material Design - Google's Material Design principles
- Clean Banking - Fintech-inspired professional design
- Modern SaaS - Stripe-inspired minimal design
- Basic Form - Simple, functional design for quick implementation
- Minimal Clean - Ultra-clean using system fonts
- Soft Minimalism - Warm minimalism with organic shapes
- Brutalist - Bold, raw aesthetic
- Creative Portal - Interactive animations with floating shapes
- Retro Future - Y2K revival with chrome effects
- Elegant Portfolio - Dribbble-inspired creative design
- AI Assistant - Neural network-inspired design
- Eco Wellness - Nature-inspired with organic shapes
- Neon Cyber - Cyberpunk gaming aesthetic
- Minimal Music - Spotify-inspired clean design
- Travel Booking - Travel industry themed
Open index.html in your browser to see all forms in action with live previews.
Each form is self-contained in its own directory:
forms/[form-name]/
├── index.html # Form HTML structure
├── style.css # Complete styling
├── script.js # Form functionality
└── README.md # Documentation
Copy shared/js/form-utils.js alongside your form folder. It provides:
FormUtils.LoginFormBase— the form lifecycle base class every form extendsFormUtils.validateEmail/validatePassword— drop-in validatorsFormUtils.showNotification— XSS-safe toast (usestextContent, notinnerHTML)FormUtils.setupFloatingLabels/setupPasswordToggle— common UI helpers
- Modify colors and styling in
style.css - Adjust the base class options in
script.js(form-group selector, validators, elements to hide on success, etc.) — see any per-formscript.jsfor examples (most are 30–80 lines) - Update text and labels in
index.html
The included simulateLogin always succeeds except for one specific combination, used to demonstrate error states:
- email:
admin@demo.com - password:
wrongpassword
login-forms/
├── index.html # Main showcase page (gallery)
├── CHANGELOG.md # Project history
├── shared/
│ └── js/
│ └── form-utils.js # FormUtils helpers + LoginFormBase class
├── forms/ # 40 self-contained form templates
│ ├── glassmorphism/
│ ├── neon/
│ ├── minimal/
│ └── ... (40 forms total)
├── assets/
│ └── screenshots/ # Responsive WebP previews + PNG fallbacks
└── docs/
├── design-guide.md
└── screenshot-integration-guide.md
Each form includes:
- ✅ Email and password inputs with validation
- ✅ Design-specific labels, including floating-label variants
- ✅ Password visibility toggle
- ✅ Real-time validation feedback
- ✅ Loading and success states
- ✅ Responsive mobile-first design
- ✅ ARIA labels on icon controls + visible keyboard focus rings
- ✅ Honors
prefers-reduced-motion - ✅ Meta description, Open Graph image, Twitter card, and SVG favicon
- ✅ Remember me checkbox, forgot password and sign up links
Every form is backed by FormUtils.LoginFormBase (in shared/js/form-utils.js). The base class owns the lifecycle:
class GlassmorphismLoginForm extends FormUtils.LoginFormBase {
constructor() {
super({
hideOnSuccess: ['.divider', '.social-login', '.signup-link'],
// optional: validators, formGroupSelector, cardSelector,
// submitButtonSelector
});
}
decorate() {
// form-specific entrance animations or visual flourishes go here
}
}What the base class handles for you:
- form submit, validation, and field-level error display
- floating labels, password toggle, success state and focus management
- forgot-password, sign-up, and social-login link defaults
- form-scoped keyboard shortcuts (no document-level leaks)
- shake/animation cleanup via
animationend(nosetTimeoutraces)
What you override per form:
decorate()for entrance effects, particles, parallax, glitch, etc.onSuccess()if your form needs a custom success transition- constructor options for selectors and validators that differ from the defaults
Per-design scripts configure the shared base class and visual hooks. New design studies use small constructors; older designs retain their distinct animation hooks.
Each form uses CSS variables or inline styles that can be easily modified:
- Primary colors
- Background gradients
- Text colors
- Border styles
Validation rules in shared/js/form-utils.js:
- Email format validation
- Existing sign-in passwords: required, passed unchanged
- Signup/new passwords: at least 15 characters, with spaces and paste supported
- Custom error messages
- Success confirmations
- Entrance animations
- Hover effects
- Focus transitions
- Success celebrations
Automated checks use the Chromium, Firefox, and WebKit engines pinned by the Playwright development dependency. Desktop/mobile visual checks use Chromium. These checks verify the current engines, not a promise that every older browser supports the enhanced gallery. Without gallery JavaScript or native dialog support, direct demo and ZIP links remain available.
- No external runtime dependencies — no CDN, no Google Fonts, no npm
- Responsive 400/800px WebP gallery thumbnails, lazy loaded with PNG fallbacks; all 400px thumbnails total under 200 KiB
- Lazy-loading on gallery images
- Small per-design subclasses across all 40 forms; validation and authentication lifecycle stay shared
- Visible keyboard focus rings via
:focus-visible(mouse users unaffected) - Honors
prefers-reduced-motion: reduceglobally — animations collapse to ~0ms - Semantic HTML, ARIA labels on icon-only controls,
role="alert"/role="status"on toasts - Form-scoped keyboard handlers (no document-level listener leaks)
- All inputs have
autocompletehints (email,current-password)
FormUtils.showNotificationusestextContentinstead ofinnerHTML— error messages from the auth backend cannot inject HTML- No
eval, nonew Function, no inline event handlers anywhere
We welcome contributions! Feel free to:
- Submit bug reports and feature requests
- Create new form designs following our guidelines
- Improve existing forms and documentation
- Share your customizations and use cases
This project is created by Aigars Silkalns for Colorlib.
See CHANGELOG.md for the 2.1.0 release: 40 designs, 160 account screens, gallery comparisons, saved collections, complete downloads, and automated checks. The earlier 2.0 refactor introduced the shared base class.
- 🌐 Visit Colorlib for more web design resources
- 📋 Browse Login Forms Collection
- 🎨 Explore HTML5 & CSS3 Login Forms
- 💻 Check out Aigars Silkalns' GitHub for other projects
- 🐛 Open an issue in this repository for bug reports
Built with ❤️ by Aigars Silkalns for Colorlib See the design/integration guide, publishing checklist, and design research.
The forms still run directly from static files, without npm, a build step, CDN scripts, or runtime packages. The following tools are only for contributors (Node.js 24.8+):
npm ci
npx playwright install chromium firefox webkit
npm run check
npm testnpm run check validates JavaScript syntax, HTML structure, local links/assets, the shared form contract, gallery entries, and download freshness. Python 3.9+ is required only for package generation/checks and extraction tests; no additional Python packages are needed. npm test exercises every template in Chromium, Firefox, and WebKit: keyboard controls, all-field validation, loading, failure/retry, successful sign-in, sign-up and both reset steps, auxiliary actions, no-JavaScript fallback, mobile overflow, and axe accessibility scans. Geometry checks cover every screen at 1200, 640, 375, and 320px widths, including filled invalid fields, long wrapped errors, and revealed passwords. npm run test:chromium runs a focused browser pass. GitHub Actions runs the same checks on pushes and pull requests. Browser and visual projects run as separate jobs after static checks, each installing only its required engine and retaining its own HTML report. The gallery tests cover locally saved favorites, shared-list isolation and saving, blocked storage/clipboard fallbacks, complete selector inventories, cross-tab updates, combined filtering, empty results, desktop/mobile screen switching, complete reset navigation, keyboard/focus behavior, no-JavaScript browsing, accessibility, and downloading/extracting every package before signing in directly from its files. Run npm run test:gallery for these tests only. Use npm run test:report to inspect local failures and traces. Preview with npm run preview or the Python static server.
Keep testing changes in CI before merging. For visual changes, also review desktop/mobile layouts, zoom, contrast over animated backgrounds, actual password-manager autofill, and screen-reader announcements. Automated scans cannot establish full WCAG compliance.
Every design includes sign-up.html, reset-password.html (request instructions),
and new-password.html (preview the final reset step). Existing sign-in links open
these pages. All four pages share the same themed stylesheet, script, and shared
helper, and work offline in the ZIP downloads.
The companion screens explicitly create no accounts, send no email, change no
passwords, and save nothing. Do not enter real credentials. A valid submission
shows a focused demo result after a short simulated wait. Reset requests always
use the same conditional response and provide a link to preview the new-password
screen. Use error@demo.com on sign-up/reset requests or demo-error-password
on the new-password screen to preview a temporary failure, then edit and retry.
No credentials travel through navigation URLs or browser storage.
New passwords require at least 15 Unicode code points, with no character-mix rule, trimming, or paste restrictions. Hints and errors are associated with their fields; submission focuses the first invalid field and reports all errors. Sign-in keeps accepting existing passwords unchanged. The companion submit buttons remain disabled without JavaScript and display an explanation; navigation still works.
Supply separate asynchronous createAccount(email, password, data),
requestReset(email, password, data), and resetPassword(email, password, data)
callbacks in super({...}) to replace these simulations. They follow the same
resolve/reject convention as authenticate below. The reset callback must obtain
and verify a real token on the server; the preview page intentionally provides no
authentication or reset authorization. Replace demo notices, button labels, and
success copy when integrating your service. Your backend must enforce validation,
password policy, generic reset responses, expiring single-use tokens, and rate limits.
- Sign-in requires a valid email and a nonempty password. Passwords are passed unchanged; creation-time length/complexity policy belongs in registration and the backend.
- Credential errors are associated using
aria-describedby; invalid fields setaria-invalid. Submission reports every invalid field and focuses the first. - Native checkboxes remain in the keyboard tab order. The password toggle exposes
aria-pressedand retains focus. [data-action="forgot-password"],[data-action="signup"], and[data-action="social"][data-provider]identify behavior regardless of visual class names. Sign-up and reset hooks follow real local page links; provider buttons show demo feedback.- The submit button disables only while submitting or after success. Loading is announced, failed requests remain visible and allow retry, and success moves focus to the result.
Pass an asynchronous authenticate(email, password, data) callback in a template's super({...}) options. Resolve only after successful authentication; reject with a safe user-facing error on failure. data includes named form values, such as the optional remember checkbox. The demo callback remains the default. Never put service secrets in frontend files.
super({
authenticate: async (email, password, data) => {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password, remember: data.remember === 'on' }),
});
if (!response.ok) throw new Error('Unable to sign in. Please try again.');
},
});Your server owns credential verification, session security, CSRF defenses appropriate to your architecture, and rate limits. Forms require shared/js/form-utils.js at the referenced relative path when copied into another project.
Run npm run package:forms after changing a template or shared/js/form-utils.js, and commit the updated downloads/*.zip files. The Python standard-library generator includes only the eight runtime/instruction files, rewrites the shared script reference for standalone use, and fixes ZIP timestamps. CI compares archive contents with current source, allowing different Python/zlib versions while catching missing or stale packages. Static hosting serves the committed ZIPs directly; there is no runtime packaging service or client ZIP library.
Run npm run screenshots to refresh all gallery images from the current forms. The gallery uses responsive 400/800px WebP thumbnails; refreshed PNGs remain available for README/social previews. Image tooling stays development-only, and source/image manifests catch stale captures.
npm run test:visual compares desktop and mobile layouts for all forms (including validation errors), the complete gallery, and the live preview. It renders a frozen source reference alongside current code in the same browser to avoid OS/font differences. Inspect expected/actual/diff images with npm run test:report. After reviewing an intentional change, npm run visual:update explicitly accepts a new reference; CI never does this automatically. See the screenshot workflow for setup, budgets, and the review/update process.