24 CSS Login Form Designs with Live Demos
Animated Gradient Border
Animated rainbow gradient border login form. A `@property`-driven conic gradient genuinely rotates around the card edge — true property animation, not a keyframes hack.
Animated Gradient Border the 15th 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-prop" aria-label="Animated gradient sign in">
<div class="lf-prop-inner">
<h2 class="lf-prop-title">Sign in</h2>
<p class="lf-prop-sub">A small bit of magic, every time.</p>
<label class="lf-prop-field">
<span>Email</span>
<input
type="email"
name="email"
autocomplete="email"
placeholder="[email protected]"
required
/>
</label>
<label class="lf-prop-field">
<span>Password</span>
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<button type="submit" class="lf-prop-btn">Sign in</button>
</div>
</form> @property --lf-prop-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.lf-prop {
position: relative;
width: 100%;
max-width: 320px;
border-radius: 16px;
padding: 1.5px;
background: conic-gradient(
from var(--lf-prop-angle, 0deg),
#7c6cff,
#ff6c8a,
#2eb88a,
#f5b454,
#7c6cff
);
animation: lfPropSpin 5s linear infinite;
}
@keyframes lfPropSpin {
to {
--lf-prop-angle: 360deg;
}
}
.lf-prop::before {
content: "";
position: absolute;
inset: -22px;
z-index: -1;
background: inherit;
filter: blur(28px);
opacity: 0.45;
border-radius: inherit;
}
.lf-prop-inner {
background: #15151d;
border-radius: 14.5px;
padding: 24px 22px;
display: grid;
gap: 12px;
}
.lf-prop-title {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #f0eeff;
}
.lf-prop-sub {
margin: -6px 0 4px;
font-size: 12px;
color: #b8b6d4;
}
.lf-prop-field {
display: grid;
gap: 5px;
font-size: 11px;
color: #b8b6d4;
}
.lf-prop-field input {
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,
box-shadow 0.15s;
}
.lf-prop-field input:focus {
border-color: #7c6cff;
box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-prop-btn {
margin-top: 4px;
padding: 11px;
background: #f0eeff;
color: #15151d;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-prop-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-prop,
.lf-prop * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Floating PillGradient BorderSide PanelSocial FirstAnimated MascotCompact ModalGlass FrostedStep-by-StepVault LockBrutalist StampStrength MeterPin Pad
View the full collection →