24 CSS Login Form Designs with Live Demos
Gradient Border
Login form with an animated gradient border. A rotating conic-gradient frames a clean monochrome interior — a premium feel with one CSS property.
Gradient Border the 8th 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-grad">
<div class="lf-grad-inner">
<div class="lf-grad-title">Welcome</div>
<div class="lf-grad-sub">Sign in to your workspace</div>
<label class="lf-grad-label"
>Email
<input type="email" placeholder="[email protected]" required />
</label>
<label class="lf-grad-label"
>Password
<input type="password" placeholder="At least 8 characters" required />
</label>
<button type="submit" class="lf-grad-btn">Sign in</button>
</div>
</form> .lf-grad {
position: relative;
width: 100%;
max-width: 320px;
border-radius: 16px;
padding: 1.5px;
background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #2eb88a, #f5b454, #7c6cff);
animation: lfgRotate 4s linear infinite;
}
@keyframes lfgRotate {
to {
--a: 360deg;
transform: rotate(0);
}
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.lf-grad::before {
content: "";
position: absolute;
inset: -20px;
background: inherit;
filter: blur(24px);
opacity: 0.5;
z-index: -1;
border-radius: inherit;
}
.lf-grad-inner {
background: #15151d;
border-radius: 14.5px;
padding: 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.lf-grad-title {
font-size: 18px;
font-weight: 700;
color: #f0eeff;
}
.lf-grad-sub {
font-size: 12px;
color: #b8b6d4;
margin-top: -8px;
margin-bottom: 4px;
}
.lf-grad-label {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11px;
color: #b8b6d4;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lf-grad-label input {
text-transform: none;
letter-spacing: normal;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.lf-grad-label input:focus {
border-color: #7c6cff;
}
.lf-grad-btn {
margin-top: 6px;
padding: 11px;
background: #f0eeff;
color: #15151d;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-grad-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-grad,
.lf-grad * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Card Flip ResetMagic LinkTerminal PromptFloating PillSide PanelSocial FirstAnimated MascotCompact ModalGlass FrostedStep-by-StepAnimated Gradient BorderVault Lock
View the full collection →