A split screen login UI built with pure HTML and CSS that divides the viewport into two sections: one for authentication and one for visual or informational content. It enhances layout contrast and structured login presentation in modern interfaces.
Usage
Use this component when interfaces require visually balanced authentication layouts, such as SaaS platforms, enterprise dashboards, onboarding portals, or branded login experiences.
Implementation
The layout uses a two column flex or grid structure to separate the login form and visual panel. CSS manages alignment, spacing, and responsive stacking to ensure clean behavior across screen sizes.
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
- Built with pure HTML and CSS
- No JavaScript required
- Uses structured split screen layout
- Enhances visual hierarchy and balance
- Fully responsive across breakpoints
- Suitable for SaaS and enterprise platforms
- Easy to customize panel background and spacing
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.