24 CSS Login Form Designs with Live Demos 17 / 24
Brutalist Stamp
Brutalist login form with heavy borders, hard-edge offset shadow, and a stamp-style badge.
The code
<form class="lf-brut" aria-label="Brutalist sign in">
<span class="lf-brut-stamp" aria-hidden="true">
<span>SECURE</span>
<span>· AUTH ·</span>
<span>2025</span>
</span>
<h2 class="lf-brut-title">Sign in.</h2>
<p class="lf-brut-sub">No frills. Get back to work.</p>
<label class="lf-brut-row">
<span>EMAIL</span>
<input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
</label>
<label class="lf-brut-row">
<span>PASSWORD</span>
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form> <form class="lf-brut" aria-label="Brutalist sign in">
<span class="lf-brut-stamp" aria-hidden="true">
<span>SECURE</span>
<span>· AUTH ·</span>
<span>2025</span>
</span>
<h2 class="lf-brut-title">Sign in.</h2>
<p class="lf-brut-sub">No frills. Get back to work.</p>
<label class="lf-brut-row">
<span>EMAIL</span>
<input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
</label>
<label class="lf-brut-row">
<span>PASSWORD</span>
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form>.lf-brut {
position: relative;
width: 100%;
max-width: 320px;
background: #fef9c3;
border: 2.5px solid #15151d;
border-radius: 6px;
padding: 22px 20px;
display: grid;
gap: 12px;
box-shadow: 6px 6px 0 0 #15151d;
font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
position: absolute;
top: -14px;
right: 12px;
background: #ef4444;
color: #fef9c3;
border: 2px solid #15151d;
padding: 2px 10px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
display: inline-flex;
gap: 6px;
transform: rotate(2deg);
box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
margin: 0;
font-size: 22px;
font-weight: 800;
color: #15151d;
letter-spacing: -0.02em;
}
.lf-brut-sub {
margin: -6px 0 4px;
font-size: 12px;
color: #4a4a5e;
}
.lf-brut-row {
display: grid;
gap: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
color: #15151d;
}
.lf-brut-row input {
background: #fff;
border: 2px solid #15151d;
border-radius: 4px;
padding: 9px 12px;
font-size: 13px;
font-family: inherit;
color: #15151d;
outline: none;
transition:
box-shadow 0.15s,
transform 0.12s;
}
.lf-brut-row input:focus {
box-shadow: 4px 4px 0 #15151d;
transform: translate(-2px, -2px);
}
.lf-brut-btn {
background: #15151d;
color: #fef9c3;
border: 2px solid #15151d;
border-radius: 4px;
padding: 11px;
font-family: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
cursor: pointer;
transition:
transform 0.12s,
box-shadow 0.15s,
background 0.15s,
color 0.15s;
}
.lf-brut-btn:hover {
background: #ef4444;
color: #fef9c3;
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 #15151d;
} .lf-brut {
position: relative;
width: 100%;
max-width: 320px;
background: #fef9c3;
border: 2.5px solid #15151d;
border-radius: 6px;
padding: 22px 20px;
display: grid;
gap: 12px;
box-shadow: 6px 6px 0 0 #15151d;
font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
position: absolute;
top: -14px;
right: 12px;
background: #ef4444;
color: #fef9c3;
border: 2px solid #15151d;
padding: 2px 10px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
display: inline-flex;
gap: 6px;
transform: rotate(2deg);
box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
margin: 0;
font-size: 22px;
font-weight: 800;
color: #15151d;
letter-spacing: -0.02em;
}
.lf-brut-sub {
margin: -6px 0 4px;
font-size: 12px;
color: #4a4a5e;
}
.lf-brut-row {
display: grid;
gap: 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
color: #15151d;
}
.lf-brut-row input {
background: #fff;
border: 2px solid #15151d;
border-radius: 4px;
padding: 9px 12px;
font-size: 13px;
font-family: inherit;
color: #15151d;
outline: none;
transition:
box-shadow 0.15s,
transform 0.12s;
}
.lf-brut-row input:focus {
box-shadow: 4px 4px 0 #15151d;
transform: translate(-2px, -2px);
}
.lf-brut-btn {
background: #15151d;
color: #fef9c3;
border: 2px solid #15151d;
border-radius: 4px;
padding: 11px;
font-family: inherit;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
cursor: pointer;
transition:
transform 0.12s,
box-shadow 0.15s,
background 0.15s,
color 0.15s;
}
.lf-brut-btn:hover {
background: #ef4444;
color: #fef9c3;
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 #15151d;
}More from 24 CSS Login Form Designs with Live Demos
Biometric PromptShow Password ToggleOTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide Panel
View the full collection →