Login & Signup Forms — Copy CSS Form Designs

Ad Slot — Below Header (728×90 Leaderboard)

6 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.

Login

HTML + CSS · self-contained35 lines

<form class="nxl1" action="#" method="post">
  <h2>Welcome back</h2>
  <p class="nxl1-sub">Sign in to your account</p>
  <label class="nxl1-field"><span>Email</span>
    <input type="email" name="email" placeholder="you@example.com" autocomplete="email" required>
  </label>
  <label class="nxl1-field"><span>Password</span>
    <input type="password" name="password" placeholder="••••••••" autocomplete="current-password" required>
  </label>
  <div class="nxl1-row">
    <label class="nxl1-check"><input type="checkbox" name="remember"> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button type="submit" class="nxl1-submit">Sign in</button>
  <p class="nxl1-alt">No account? <a href="#">Create one</a></p>
</form>
<style>
.nxl1, .nxl1 * { box-sizing: border-box; }
.nxl1 { width: 100%; max-width: 360px; margin: 0 auto; padding: clamp(20px, 5vw, 32px); background: #fff; border: 1px solid #ece4d8; border-radius: 18px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl1 h2 { margin: 0 0 4px; font: 700 24px/1.25 Georgia,"Times New Roman",serif; }
.nxl1-sub { margin: 0 0 22px; color: #6d645a; font-size: 14.5px; }
.nxl1-field { display: block; margin-bottom: 14px; }
.nxl1-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.nxl1-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 10px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nxl1-field input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl1-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl1-submit:hover { background: #a24832; }
.nxl1-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; margin: -2px 0 14px; font-size: 14px; }
.nxl1-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.nxl1-check input { width: 18px; height: 18px; accent-color: #a24832; }
.nxl1 a { color: #a24832; font-weight: 600; text-decoration: none; }
.nxl1 a:hover { text-decoration: underline; }
.nxl1-row a { display: inline-flex; align-items: center; min-height: 40px; }
.nxl1-alt { margin: 16px 0 0; text-align: center; color: #6d645a; font-size: 14px; }
</style>

Sign Up

HTML + CSS · self-contained31 lines

<form class="nxl2" action="#" method="post">
  <h2>Create your account</h2>
  <p class="nxl2-sub">Free for 14 days. No card needed.</p>
  <div class="nxl2-two">
    <label class="nxl2-field"><span>First name</span><input type="text" name="first" autocomplete="given-name" required></label>
    <label class="nxl2-field"><span>Last name</span><input type="text" name="last" autocomplete="family-name" required></label>
  </div>
  <label class="nxl2-field"><span>Work email</span><input type="email" name="email" placeholder="you@company.com" autocomplete="email" required></label>
  <label class="nxl2-field"><span>Password</span><input type="password" name="password" minlength="8" autocomplete="new-password" required>
    <small>At least 8 characters</small>
  </label>
  <label class="nxl2-terms"><input type="checkbox" required> <span>I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></span></label>
  <button type="submit" class="nxl2-submit">Create account</button>
</form>
<style>
.nxl2, .nxl2 * { box-sizing: border-box; }
.nxl2 { width: 100%; max-width: 420px; margin: 0 auto; padding: clamp(20px, 5vw, 32px); background: #fff; border: 1px solid #ece4d8; border-radius: 18px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl2 h2 { margin: 0 0 4px; font: 700 24px/1.25 Georgia,"Times New Roman",serif; }
.nxl2-sub { margin: 0 0 22px; color: #6d645a; font-size: 14.5px; }
.nxl2-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 0 12px; }
.nxl2-field { display: block; margin-bottom: 14px; }
.nxl2-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.nxl2-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 10px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nxl2-field input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl2-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl2-submit:hover { background: #a24832; }
.nxl2-field small { display: block; margin-top: 6px; color: #8a7f73; font-size: 12.5px; }
.nxl2-terms { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; color: #5e503f; font-size: 14px; line-height: 1.5; cursor: pointer; }
.nxl2-terms input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #a24832; }
.nxl2 a { color: #a24832; font-weight: 600; }
</style>

Social Login

HTML + CSS · self-contained30 lines

<form class="nxl3" action="#" method="post">
  <h2>Sign in</h2>
  <div class="nxl3-social">
    <button type="button" class="nxl3-sbtn"><span class="nxl3-g" aria-hidden="true">G</span> Continue with Google</button>
    <button type="button" class="nxl3-sbtn nxl3-dark"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.6 0 0 1 5 0c1.9-1.3 2.8-1 2.8-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.6 5 .4.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg> Continue with GitHub</button>
  </div>
  <div class="nxl3-or"><span>or</span></div>
  <label class="nxl3-field"><span>Email</span><input type="email" name="email" placeholder="you@example.com" autocomplete="email" required></label>
  <button type="submit" class="nxl3-submit">Continue with email</button>
</form>
<style>
.nxl3, .nxl3 * { box-sizing: border-box; }
.nxl3 { width: 100%; max-width: 380px; margin: 0 auto; padding: clamp(20px, 5vw, 32px); background: #fff; border: 1px solid #ece4d8; border-radius: 18px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl3 h2 { margin: 0 0 18px; text-align: center; font: 700 24px/1.25 Georgia,"Times New Roman",serif; }
.nxl3-social { display: grid; gap: 10px; }
.nxl3-sbtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 12px; background: #fff; color: #2a1f1a; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl3-sbtn:hover { background: #faf6f0; }
.nxl3-dark { border-color: #111; background: #111; color: #fff; }
.nxl3-dark:hover { background: #2b2b2b; }
.nxl3-dark svg { width: 20px; height: 20px; fill: currentColor; }
.nxl3-g { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); color: #fff; font: 800 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxl3-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #8a7f73; font-size: 13px; }
.nxl3-or::before, .nxl3-or::after { content: ""; flex: 1; height: 1px; background: #ece4d8; }
.nxl3-field { display: block; margin-bottom: 14px; }
.nxl3-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.nxl3-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 10px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nxl3-field input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl3-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl3-submit:hover { background: #a24832; }
</style>

Split Panel

HTML + CSS · self-contained33 lines

<div class="nxl4">
  <div class="nxl4-side">
    <p class="nxl4-logo">Brand</p>
    <blockquote>“The calmest way to run a team.”</blockquote>
    <p class="nxl4-by">— Priya, Head of Ops</p>
  </div>
  <form class="nxl4-form" action="#" method="post">
    <h2>Log in</h2>
    <label class="nxl4-field"><span>Email</span><input type="email" name="email" autocomplete="email" required></label>
    <label class="nxl4-field"><span>Password</span><input type="password" name="password" autocomplete="current-password" required></label>
    <button type="submit" class="nxl4-submit">Log in</button>
    <p class="nxl4-alt"><a href="#">Forgot password?</a></p>
  </form>
</div>
<style>
.nxl4, .nxl4 * { box-sizing: border-box; }
.nxl4 { display: grid; grid-template-columns: 1fr 1.1fr; width: 100%; max-width: 760px; margin: 0 auto; overflow: hidden; border: 1px solid #ece4d8; border-radius: 20px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl4-side { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 28px; background: linear-gradient(160deg, #2a1f1a, #6b2a1a); color: #faf6f0; }
.nxl4-logo { margin: 0; font: 700 20px/1 Georgia,"Times New Roman",serif; }
.nxl4-side blockquote { margin: 0; font: italic 400 22px/1.35 Georgia,"Times New Roman",serif; }
.nxl4-by { margin: 0; color: #d4c5a9; font-size: 14px; }
.nxl4-form { padding: clamp(20px, 5vw, 36px); }
.nxl4-form h2 { margin: 0 0 18px; font: 700 24px/1.25 Georgia,"Times New Roman",serif; }
.nxl4-field { display: block; margin-bottom: 14px; }
.nxl4-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.nxl4-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 10px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nxl4-field input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl4-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl4-submit:hover { background: #a24832; }
.nxl4-alt { margin: 14px 0 0; text-align: center; font-size: 14px; }
.nxl4-alt a { display: inline-flex; align-items: center; min-height: 40px; color: #a24832; font-weight: 600; text-decoration: none; }
@media (max-width: 600px) { .nxl4 { grid-template-columns: 1fr; } .nxl4-side blockquote { font-size: 18px; } }
</style>

Magic Link

HTML + CSS · self-contained25 lines

<form class="nxl5" action="#" method="post">
  <div class="nxl5-icon" aria-hidden="true">✉️</div>
  <h2>Sign in without a password</h2>
  <p>We’ll email you a one-time link that signs you in instantly.</p>
  <label class="nxl5-field"><span>Email</span><input type="email" name="email" placeholder="you@example.com" autocomplete="email" required></label>
  <button type="submit" class="nxl5-submit">Send magic link</button>
  <p class="nxl5-note">Link expires in 15 minutes.</p>
</form>
<style>
.nxl5, .nxl5 * { box-sizing: border-box; }
.nxl5 { width: 100%; max-width: 380px; margin: 0 auto; padding: clamp(22px, 5vw, 34px); background: #fff; border: 1px solid #ece4d8; border-radius: 18px; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl5-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; border-radius: 16px; background: #f3e2d9; font-size: 26px; }
.nxl5 h2 { margin: 0 0 8px; font: 700 22px/1.3 Georgia,"Times New Roman",serif; }
.nxl5 > p { margin: 0 0 20px; color: #6d645a; font-size: 14.5px; line-height: 1.55; }
.nxl5-field { display: block; margin-bottom: 14px; }
.nxl5-field span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.nxl5-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1.5px solid #ddd0bf; border-radius: 10px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nxl5-field input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl5-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl5-submit:hover { background: #a24832; }
.nxl5-field { text-align: left; }
.nxl5 .nxl5-submit { background: #a24832; }
.nxl5 .nxl5-submit:hover { background: #8a3a27; }
.nxl5 > p.nxl5-note { margin: 12px 0 0; color: #8a7f73; font-size: 13px; }
</style>

Verify Code

HTML + CSS · self-contained29 lines

<form class="nxl6" action="#" method="post">
  <h2>Check your phone</h2>
  <p>Enter the 6-digit code we sent to <b>+44 •••• 5678</b></p>
  <fieldset class="nxl6-code">
    <legend class="nxl6-sr">Verification code</legend>
    <input inputmode="numeric" maxlength="1" aria-label="Digit 1" autocomplete="one-time-code">
    <input inputmode="numeric" maxlength="1" aria-label="Digit 2">
    <input inputmode="numeric" maxlength="1" aria-label="Digit 3">
    <input inputmode="numeric" maxlength="1" aria-label="Digit 4">
    <input inputmode="numeric" maxlength="1" aria-label="Digit 5">
    <input inputmode="numeric" maxlength="1" aria-label="Digit 6">
  </fieldset>
  <button type="submit" class="nxl6-submit">Verify</button>
  <p class="nxl6-alt">Didn’t get it? <button type="button" class="nxl6-resend">Resend code</button></p>
</form>
<style>
.nxl6, .nxl6 * { box-sizing: border-box; }
.nxl6 { width: 100%; max-width: 380px; margin: 0 auto; padding: clamp(20px, 5vw, 32px); background: #fff; border: 1px solid #ece4d8; border-radius: 18px; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxl6 h2 { margin: 0 0 8px; font: 700 22px/1.3 Georgia,"Times New Roman",serif; }
.nxl6 > p { margin: 0 0 20px; color: #6d645a; font-size: 14.5px; line-height: 1.55; }
.nxl6-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 18px; padding: 0; border: 0; }
.nxl6-code input { width: 100%; min-width: 0; height: 52px; padding: 0; border: 1.5px solid #ddd0bf; border-radius: 10px; text-align: center; color: #2a1f1a; font: 700 20px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; }
.nxl6-code input:focus { border-color: #a24832; box-shadow: 0 0 0 3px rgba(162,72,50,.15); }
.nxl6-submit { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl6-submit:hover { background: #a24832; }
.nxl6 > p.nxl6-alt { margin: 12px 0 0; font-size: 14px; }
.nxl6-resend { min-height: 40px; padding: 0 4px; border: 0; background: none; color: #a24832; font: 600 14px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxl6-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.

Ad Slot — Mid Content (Responsive In-Article)

💡

What Is This?

Gallery of login and signup form designs
Includes minimal, social login, and floating label variants
Pure HTML/CSS with interactive inputs
Copy code and add your own form action and validation
Customizable input styles and button colors

🛠️

How to Use

Browse the form design gallery
Preview each form with interactive input fields
Copy the HTML and CSS code
Add your own form action, validation, and branding
Customize input styles, button colors, and layout

🎯

Use Cases

Building login and registration pages for web apps
Finding form design inspiration for authentication flows
Prototyping signup forms for client presentations
Learning CSS input styling and animation techniques
Creating consistent auth page designs across projects

Ad Slot — Bottom (300×250 Rectangle)

🔐 Login / Signup Forms