Back to Login PagesLogin Page
Brutalist / Retro
Thick black borders, offset drop shadows and monospace type.
About This Template
A bold, unapologetic style: thick black borders, hard offset shadows, a bright yellow backdrop and monospace type. Great for portfolios, indie tools, and anything that wants to stand out from typical SaaS design.
Login PageCategory
HTML & CSSFormat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brutalist Retro Login Page Template — Free HTML & CSS</title>
<meta name="description" content="Free brutalist login page template with thick black borders, offset drop shadows and monospace type. Bold, free HTML & CSS code for portfolios and indie tools.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://fatimahopefoundation.com/templates/login-pages/07-brutalist">
<meta property="og:type" content="website">
<meta property="og:title" content="Brutalist Retro Login Page Template — Free HTML & CSS">
<meta property="og:description" content="Free brutalist login page template with thick black borders, offset drop shadows and monospace type. Bold, free HTML & CSS code for portfolios and indie tools.">
<meta property="og:url" content="https://fatimahopefoundation.com/templates/login-pages/07-brutalist">
<meta property="og:image" content="https://fatimahopefoundation.com/images/login/07-brutalist.png">
<meta property="og:site_name" content="Fatima Hope Foundation">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brutalist Retro Login Page Template — Free HTML & CSS">
<meta name="twitter:description" content="Free brutalist login page template with thick black borders, offset drop shadows and monospace type. Bold, free HTML & CSS code for portfolios and indie tools.">
<meta name="twitter:image" content="https://fatimahopefoundation.com/images/login/07-brutalist.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="login-wrap">
<section class="login-card">
<div class="brand-mark">LOGIN.SYS</div>
<h1>SIGN IN</h1>
<p class="subtitle">// enter credentials to proceed</p>
<form class="login-form">
<label class="field">
<span>EMAIL</span>
<input type="email" placeholder="you@example.com" required>
</label>
<label class="field">
<span>PASSWORD</span>
<input type="password" placeholder="********" required>
</label>
<div class="row-between">
<label class="checkbox">
<input type="checkbox">
<span>REMEMBER ME</span>
</label>
<a href="#" class="link">FORGOT?</a>
</div>
<button type="submit" class="btn-primary">ENTER →</button>
</form>
<div class="divider"><span>OR</span></div>
<div class="social-row">
<button class="btn-social" type="button">GOOGLE</button>
<button class="btn-social" type="button">GITHUB</button>
</div>
<p class="footer-text">NO ACCOUNT? <a href="#">SIGN UP</a></p>
</section>
</main>
</body>
</html>* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Courier New", ui-monospace, Menlo, monospace;
min-height: 100vh;
background: #ffde59;
background-image: radial-gradient(#000 1px, transparent 1px);
background-size: 22px 22px;
color: #0a0a0a;
}
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.login-card {
width: 100%;
max-width: 400px;
background: #fff;
border: 4px solid #0a0a0a;
border-radius: 0;
padding: 36px 32px;
box-shadow: 10px 10px 0 #0a0a0a;
}
.brand-mark {
display: inline-block;
background: #0a0a0a;
color: #ffde59;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
padding: 6px 10px;
margin-bottom: 20px;
}
h1 { font-size: 30px; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.subtitle { color: #0a0a0a; font-size: 13px; margin-bottom: 26px; opacity: .7; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.field input {
font: inherit;
padding: 12px 14px;
border: 3px solid #0a0a0a;
border-radius: 0;
font-weight: 400;
font-size: 14px;
outline: none;
background: #fff;
transition: box-shadow .1s;
}
.field input:focus { box-shadow: 4px 4px 0 #ff5c8a; }
.row-between { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; }
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { accent-color: #0a0a0a; }
.link { color: #0a0a0a; text-decoration: underline; }
.btn-primary {
margin-top: 4px;
padding: 13px;
border: 3px solid #0a0a0a;
border-radius: 0;
background: #0a0a0a;
color: #ffde59;
font-family: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
box-shadow: 6px 6px 0 #ff5c8a;
transition: transform .1s, box-shadow .1s;
}
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #ff5c8a; }
.btn-primary:active { transform: translate(0, 0); box-shadow: 3px 3px 0 #ff5c8a; }
.divider { display: flex; align-items: center; text-align: center; font-size: 11px; font-weight: 700; margin: 24px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 3px; background: #0a0a0a; }
.divider span { padding: 0 12px; }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-social {
padding: 10px;
border: 3px solid #0a0a0a;
background: #fff;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
color: #0a0a0a;
cursor: pointer;
box-shadow: 4px 4px 0 #0a0a0a;
transition: transform .1s, box-shadow .1s;
}
.btn-social:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; }
.btn-social:active { transform: translate(0, 0); box-shadow: 2px 2px 0 #0a0a0a; }
.footer-text { margin-top: 24px; text-align: center; font-size: 12px; font-weight: 700; }
.footer-text a { color: #ff5c8a; text-decoration: underline; }