This split screen login UI separates visuals and form content, perfect for branding and onboarding experiences.
HTML
<div class="login-split">
<div class="left">Welcome Back</div>
<form class="right">
<input placeholder="Email">
<input placeholder="Password">
<button>Login</button>
</form>
</div>CSS
.login-split{
display:grid;
grid-template-columns:1fr 1fr;
max-width:640px;
margin:auto;
border-radius:16px;
overflow:hidden;
border:1px solid var(--card-border);
background:var(--card-bg);
}
.left{
background:var(--accent-bg);
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:600;
padding:24px;
}
.right{
padding:24px;
display:flex;
flex-direction:column;
gap:12px;
background:var(--card-bg);
color:var(--card-text);
}
.right input{
padding:10px 12px;
border-radius:8px;
border:1px solid var(--input-border);
font-size:13px;
background:var(--input-bg);
color:var(--card-text);
}
.right input::placeholder{
color:var(--input-placeholder);
}
.right button{
margin-top:8px;
padding:10px;
border-radius:8px;
border:none;
background:var(--btn-bg);
color:#ffffff;
font-size:13px;
cursor:pointer;
}
:root{
--card-bg:#ffffff;
--card-text:#0f172a;
--card-border:#e5e7eb;
--accent-bg:#2563eb;
--input-bg:#ffffff;
--input-border:#cbd5e1;
--input-placeholder:#64748b;
--btn-bg:#2563eb;
}
@media (prefers-color-scheme: dark){
:root{
--card-bg:#020617;
--card-text:#e5e7eb;
--card-border:#1f2937;
--accent-bg:#1e40af;
--input-bg:#020617;
--input-border:#1f2937;
--input-placeholder:#94a3b8;
--btn-bg:#3b82f6;
}
}
@media (max-width:640px){
.login-split{
grid-template-columns:1fr;
}
.left{
font-size:18px;
}
}Notes
- Strong branding space
- Enterprise-ready
- Clean UX
- Responsive with media queries
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.