24 CSS Login Form Designs with Live Demos
Vault Lock
Vault-style secure login form. The lock dial rotates and the bolt slides open the moment the password field gains focus — pure CSS, driven by `:focus-within` and `:has()`.
Vault Lock the 16th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="lf-vault" aria-label="Vault sign in">
<figure class="lf-vault-lock" aria-hidden="true">
<span class="lf-vault-dial"></span>
<span class="lf-vault-bolt"></span>
</figure>
<h2 class="lf-vault-title">Vault access</h2>
<p class="lf-vault-sub">Authenticate to view encrypted contents</p>
<label class="lf-vault-field">
<span>Email</span>
<input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
</label>
<label class="lf-vault-field lf-vault-pw">
<span>Master password</span>
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<button type="submit" class="lf-vault-btn">Unlock</button>
</form> .lf-vault {
width: 100%;
max-width: 300px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 26px 22px 22px;
display: grid;
gap: 10px;
justify-items: center;
text-align: center;
}
.lf-vault-lock {
position: relative;
margin: 0 0 6px;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #2a2a36 0%, #15151d 70%);
border: 2px solid #2eb88a;
box-shadow:
0 0 0 4px rgba(46, 184, 138, 0.08),
0 0 24px rgba(46, 184, 138, 0.25);
transition:
border-color 0.3s,
box-shadow 0.3s;
}
.lf-vault-dial {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 3px;
background: #2eb88a;
border-radius: 2px;
transform: translate(-50%, -50%) rotate(35deg);
transform-origin: center;
transition:
transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.3),
background 0.3s;
}
.lf-vault-dial::after {
content: "";
position: absolute;
inset: -3px auto -3px -3px;
width: 9px;
border-radius: 50%;
background: #2eb88a;
transition: background 0.3s;
}
.lf-vault-bolt {
position: absolute;
bottom: -8px;
left: 50%;
width: 14px;
height: 18px;
background: #2eb88a;
border-radius: 3px;
transform: translateX(-50%) translateY(0);
transition:
transform 0.35s ease,
background 0.3s;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-lock {
border-color: #7c6cff;
box-shadow:
0 0 0 4px rgba(124, 108, 255, 0.12),
0 0 28px rgba(124, 108, 255, 0.45);
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial {
transform: translate(-50%, -50%) rotate(220deg);
background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial::after {
background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-bolt {
transform: translateX(-50%) translateY(8px);
background: #7c6cff;
}
.lf-vault-title {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #f0eeff;
}
.lf-vault-sub {
margin: 0 0 4px;
font-size: 11px;
color: #b8b6d4;
}
.lf-vault-field {
display: grid;
gap: 4px;
font-size: 11px;
color: #b8b6d4;
width: 100%;
text-align: left;
}
.lf-vault-field input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: #f0eeff;
outline: none;
transition: border-color 0.15s;
}
.lf-vault-field input:focus {
border-color: #7c6cff;
}
.lf-vault-btn {
width: 100%;
padding: 11px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-vault-btn:hover {
transform: translateY(-1px);
} More from 24 CSS Login Form Designs with Live Demos
Step-by-StepAnimated Gradient BorderBrutalist StampStrength MeterPin PadInline ValidationConstellationBiometric PromptShow Password ToggleOTP VerifyAurora GlowNeon Synthwave
View the full collection →