5 Pure CSS3 with JSPublished 2026-10-04Free · no sign-up
Eight login and sign-up screens written in plain HTML and CSS, with a little JavaScript where a demo shows a state change. They cover a classic card, a split layout, provider buttons, a frosted-glass panel, a passwordless magic link, an error summary, a minimal admin login and a sign-up form with live password rules.
A clean sign-in card with email, password, a remember-me checkbox and a forgot-password link. Every field has a visible label and the right autocomplete token, so password managers and browsers fill it correctly, and the primary button is full width.
A two-panel login: a branded colour panel with a short message on the left and the form on the right. Below 640 pixels the brand panel shrinks to a header strip, so the form stays first and fully usable on phones.
View code
<div class="spl">
<aside><p class="brand">Harbor</p><p class="msg">Run your shop from one calm dashboard.</p></aside>
<form onsubmit="event.preventDefault()">
<h1>Welcome back</h1>
<label for="sp-e">Work email</label><input id="sp-e" type="email" autocomplete="email">
<label for="sp-p">Password</label><input id="sp-p" type="password" autocomplete="current-password">
<button>Continue</button>
</form>
</div>
A dark sign-in panel with provider buttons above an or divider and an email form below. The provider buttons use neutral icons drawn in CSS, so you can drop in each provider's official logo artwork when you add their real sign-in flow.
View code
<form class="soc" onsubmit="event.preventDefault()">
<h1>Log in to Studio</h1>
<button type="button" class="prov"><span class="ic g" aria-hidden="true"></span>Continue with Google</button>
<button type="button" class="prov"><span class="ic a" aria-hidden="true"></span>Continue with Apple</button>
<p class="or"><span>or</span></p>
<label for="so-e">Email</label>
<input id="so-e" type="email" autocomplete="email" placeholder="you@studio.com">
<button class="go">Send me a login link</button>
</form>
A frosted-glass sign-in panel floating over colourful blurred shapes. The panel uses backdrop-filter with a translucent fill, and the text and fields sit on a dark enough tint that they keep a readable contrast even where the shapes behind are bright.
A one-field login that emails a sign-in link. Submitting swaps the form for a confirmation that names the address, and focus moves to the confirmation heading so keyboard and screen reader users land on the new message.
View code
<div class="mg">
<form id="mg-f" onsubmit="event.preventDefault()">
<h1>Sign in without a password</h1>
<p>We will email you a link that signs you in.</p>
<label for="mg-e">Email</label>
<input id="mg-e" type="email" autocomplete="email" required value="dana@example.com">
<button>Email me a link</button>
</form>
<div id="mg-done" hidden>
<h2 tabindex="-1">Check your inbox</h2>
<p>We sent a link to <b id="mg-addr"></b>. It works for 15 minutes.</p>
</div>
</div>
When sign-in fails, an error summary appears at the top of the form with role="alert" and a link to the field to fix. The wrong field is marked with aria-invalid and its own message, following the error-summary pattern used by public-service sites.
const f = document.querySelector('.er');
f.addEventListener('submit', e => {
e.preventDefault();
const p = document.getElementById('er-p'), bad = !p.value;
p.setAttribute('aria-invalid', String(bad));
document.getElementById('er-pm').hidden = !bad;
f.querySelector('.sum').hidden = !bad;
if (bad) f.querySelector('.sum a').focus();
});
07. Minimal Underline Login
MinimalAuth
A pared-back login for portfolio sites and admin panels: underline fields, generous spacing and one quiet button. Because the borders are subtle, focus is shown with a bright underline and the labels stay visible above each field at all times.
A create-account form that shows password rules as a checklist and ticks each one live as you type. The checklist is linked to the field with aria-describedby, and each rule changes both its icon and its text colour, not colour alone.
View code
<form class="su" onsubmit="event.preventDefault()">
<h1>Create your account</h1>
<label for="su-n">Name</label><input id="su-n" autocomplete="name">
<label for="su-e">Email</label><input id="su-e" type="email" autocomplete="email">
<label for="su-p">Password</label>
<input id="su-p" type="password" autocomplete="new-password" aria-describedby="su-rules" value="shop2026">
<ul id="su-rules">
<li data-r="len">At least 10 characters</li>
<li data-r="num">Contains a number</li>
<li data-r="case">Upper and lower case letters</li>
</ul>
<button>Create account</button>
</form>
const pw = document.getElementById('su-p');
const tests = { len: v => v.length >= 10, num: v => /\d/.test(v), case: v => /[a-z]/.test(v) && /[A-Z]/.test(v) };
function check() {
document.querySelectorAll('#su-rules li').forEach(li => li.classList.toggle('ok', tests[li.dataset.r](pw.value)));
}
pw.addEventListener('input', check);
check();
About these CSS Login Forms
Autocomplete makes login easier
Password managers rely on the autocomplete attribute. Use email or username for the account field, current-password on sign-in and new-password on sign-up so the manager offers to generate a strong password. Never block pasting into password fields.
Errors that help
When sign-in fails, tell people what to do next without revealing whether the email exists. The error summary demo shows a box at the top with role="alert" and a link to the field, and marks the field itself with aria-invalid and an inline message.
Passwordless options
Magic links and one-time codes remove passwords entirely. After the request, replace the form with a clear confirmation and move focus to its heading, so keyboard and screen reader users notice the change.
Provider buttons
Sign in with Google or Apple buttons must follow each provider's own brand rules and use their official artwork. The social demo uses neutral placeholders so you can drop in the official assets when you connect the real flows.
Frequently asked questions
Are these forms secure?
They are front-end templates. Security depends on your server: use HTTPS, hash passwords and rate-limit attempts.
Can I use them with any backend?
Yes. They are standard HTML forms; set the action and method for your server or connect them with fetch.
Do they work on phones?
Yes. Fields are full width, and the split layout collapses to one column below 640 pixels.