A context lock login form built with pure HTML and CSS that prompts users to re-authenticate within a locked interface context. It enhances session protection and security focused interaction clarity in authentication workflows.
Usage
Use this component when interfaces require temporary session lock screens, such as returning user verification, admin dashboards, secure account areas, or inactivity-based authentication prompts.
Implementation
The layout is implemented using a centered authentication container with contextual messaging and input fields, styled using CSS for spacing, visual focus, and responsive alignment across devices.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Context Lock — Login</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet"/>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<div class="wrapper">
<div class="card">
<div class="card__header">
<div class="lock-ring">
<div class="lock-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.8"/>
<path d="M8 11V7a4 4 0 0 1 8 0v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="12" cy="16" r="1.5" fill="currentColor"/>
<line x1="12" y1="17.5" x2="12" y2="19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<div class="ring ring--1"></div>
<div class="ring ring--2"></div>
<div class="ring ring--3"></div>
</div>
<div class="card__brand">
<span class="brand-name">Context<em>Lock</em></span>
<span class="brand-tag">Secure Workspace Access</span>
</div>
</div>
<div class="status-bar">
<span class="status-dot"></span>
<span class="status-text">Encrypted Channel Active</span>
<span class="status-code">TLS 1.3</span>
</div>
<form class="form" onsubmit="return false;">
<div class="field">
<label class="field__label" for="email">
<svg viewBox="0 0 16 16" fill="none"><path d="M2 4l6 5 6-5M2 4h12v9H2V4z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
Identifier
</label>
<div class="field__wrap">
<input class="field__input" type="email" id="email" placeholder="user@domain.io" autocomplete="off"/>
<span class="field__border"></span>
</div>
</div>
<div class="field">
<label class="field__label" for="password">
<svg viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="7" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><circle cx="8" cy="10.5" r="1" fill="currentColor"/></svg>
Passphrase
</label>
<div class="field__wrap">
<input class="field__input" type="password" id="password" placeholder="••••••••••••"/>
<button type="button" class="field__toggle" aria-label="Show password">
<svg viewBox="0 0 16 16" fill="none"><path d="M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.2"/></svg>
</button>
<span class="field__border"></span>
</div>
</div>
<div class="form__options">
<label class="checkbox">
<input type="checkbox" class="checkbox__input"/>
<span class="checkbox__box"></span>
<span class="checkbox__label">Keep session</span>
</label>
<a href="#" class="link">Recover access →</a>
</div>
<button class="btn" type="submit">
<span class="btn__text">Authenticate</span>
<span class="btn__icon">
<svg viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="btn__shimmer"></span>
</button>
</form>
<div class="card__footer">
<span>No account?</span>
<a href="#" class="link">Request clearance →</a>
</div>
</div>
<div class="meta-panel">
<div class="meta-item">
<span class="meta-label">Protocol</span>
<span class="meta-value">Zero-Trust</span>
</div>
<div class="meta-divider"></div>
<div class="meta-item">
<span class="meta-label">Node</span>
<span class="meta-value">AP-MUM-04</span>
</div>
<div class="meta-divider"></div>
<div class="meta-item">
<span class="meta-label">Version</span>
<span class="meta-value">2.9.1</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #080b10;
--surface: #0d1117;
--surface-2: #111720;
--border: rgba(255,255,255,0.07);
--border-lit: rgba(99,211,255,0.35);
--accent: #63d3ff;
--accent-glow: rgba(99,211,255,0.18);
--accent-dim: rgba(99,211,255,0.55);
--text: #e4eaf4;
--text-muted: #556070;
--text-faint: #2e3844;
--danger: #ff5f7a;
--success: #3dffa0;
--font-display: 'Syne', sans-serif;
--font-mono: 'DM Mono', monospace;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
}
body {
min-height: 100vh;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
color: var(--text);
overflow: hidden;
}
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(99,211,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(99,211,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.bg-glow {
position: fixed;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 500px;
background: radial-gradient(ellipse at center, rgba(99,211,255,0.07) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.wrapper {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
max-width: 440px;
padding: 20px;
}
.card {
width: 100%;
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 36px 36px 28px;
position: relative;
overflow: hidden;
animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(28px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
opacity: 0.6;
}
.card__header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.lock-ring {
position: relative;
width: 54px;
height: 54px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lock-icon {
width: 30px;
height: 30px;
color: var(--accent);
z-index: 2;
position: relative;
animation: lockFloat 4s ease-in-out infinite;
}
@keyframes lockFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.lock-icon svg { width: 100%; height: 100%; }
.ring {
position: absolute;
border-radius: 50%;
border: 1px solid var(--accent);
animation: ringPulse 3s ease-out infinite;
}
.ring--1 {
width: 42px; height: 42px;
opacity: 0.25;
animation-delay: 0s;
}
.ring--2 {
width: 54px; height: 54px;
opacity: 0.12;
animation-delay: 0.5s;
}
.ring--3 {
width: 66px; height: 66px;
opacity: 0.06;
animation-delay: 1s;
}
@keyframes ringPulse {
0% { transform: scale(0.95); opacity: inherit; }
50% { transform: scale(1.05); }
100% { transform: scale(0.95); opacity: inherit; }
}
.card__brand {
display: flex;
flex-direction: column;
gap: 4px;
}
.brand-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--text);
}
.brand-name em {
font-style: normal;
color: var(--accent);
}
.brand-tag {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.status-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 12px;
margin-bottom: 28px;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 8px var(--success);
animation: blink 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.status-text { flex: 1; }
.status-code {
font-size: 10px;
letter-spacing: 0.1em;
color: var(--accent-dim);
background: var(--accent-glow);
padding: 2px 7px;
border-radius: 4px;
border: 1px solid rgba(99,211,255,0.15);
}
.form {
display: flex;
flex-direction: column;
gap: 20px;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.field:nth-child(1) { animation-delay: 0.1s; }
.field:nth-child(2) { animation-delay: 0.2s; }
@keyframes fieldIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.field__label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
cursor: default;
}
.field__label svg {
width: 13px;
height: 13px;
color: var(--accent-dim);
}
.field__wrap {
position: relative;
}
.field__input {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 42px 12px 14px;
font-family: var(--font-mono);
font-size: 14px;
color: var(--text);
outline: none;
transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
letter-spacing: 0.03em;
}
.field__input::placeholder {
color: var(--text-faint);
letter-spacing: 0.04em;
}
.field__input:focus {
border-color: var(--border-lit);
background: #0f1620;
box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 0 rgba(99,211,255,0.05);
}
.field__input:focus + .field__border,
.field__input:focus ~ .field__border {
transform: scaleX(1);
}
.field__border {
position: absolute;
bottom: 0; left: 8px; right: 8px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
border-radius: 1px;
}
.field__toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 10px 13px;
color: var(--text-muted);
transition: color 0.2s;
line-height: 0;
}
.field__toggle:hover { color: var(--accent); }
.field__toggle svg { width: 16px; height: 16px; }
.form__options {
display: flex;
align-items: center;
justify-content: space-between;
animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.checkbox {
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
}
.checkbox__input {
display: none;
}
.checkbox__box {
width: 16px;
height: 16px;
border: 1px solid var(--text-faint);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, background 0.2s;
flex-shrink: 0;
}
.checkbox__input:checked + .checkbox__box {
border-color: var(--accent);
background: var(--accent-glow);
}
.checkbox__input:checked + .checkbox__box::after {
content: '';
display: block;
width: 8px;
height: 5px;
border-left: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg) translateY(-1px);
}
.checkbox__label {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.checkbox:hover .checkbox__box {
border-color: var(--accent-dim);
}
.link {
font-size: 12px;
color: var(--accent-dim);
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.2s;
}
.link:hover { color: var(--accent); }
.btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 24px;
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #040911;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.25s;
box-shadow: 0 4px 24px rgba(99,211,255,0.25);
animation: fieldIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(99,211,255,0.38);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 2px 12px rgba(99,211,255,0.2);
}
.btn__icon svg {
width: 16px;
height: 16px;
transition: transform 0.25s;
}
.btn:hover .btn__icon svg {
transform: translateX(3px);
}
.btn__shimmer {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
skewX: -15deg;
animation: shimmer 3s ease-in-out infinite 1s;
}
@keyframes shimmer {
0% { left: -60%; }
50% { left: 150%; }
100% { left: 150%; }
}
.card__footer {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
}
.meta-panel {
display: flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 20px;
width: 100%;
animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.15s both;
}
.meta-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1;
}
.meta-label {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
}
.meta-value {
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.06em;
}
.meta-divider {
width: 1px;
height: 28px;
background: var(--border);
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 2px; }
@media (max-width: 480px) {
.card { padding: 28px 22px 22px; }
.brand-name { font-size: 19px; }
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for session lock authentication screens
- Enhances security focused interface clarity
- Fully responsive across breakpoints
- Suitable for dashboards and secure panels
- Easy to customize lock messaging and styling
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.