24 CSS Login Form Designs with Live Demos
Constellation
Animated starfield login form. A subtle constellation drifts behind the card with staggered twinkling stars and periodic shooting-star streaks.
Constellation the 23rd 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-cons" aria-label="Constellation sign in">
<div class="lf-cons-sky" aria-hidden="true">
<span class="lf-cons-star s1"></span>
<span class="lf-cons-star s2"></span>
<span class="lf-cons-star s3"></span>
<span class="lf-cons-star s4"></span>
<span class="lf-cons-star s5"></span>
<span class="lf-cons-star s6"></span>
<span class="lf-cons-shoot"></span>
</div>
<article class="lf-cons-card">
<h2 class="lf-cons-title">Welcome traveller</h2>
<p class="lf-cons-sub">Sign in to continue your journey</p>
<label class="lf-cons-row">
<input type="email" name="email" autocomplete="email" placeholder="Email" required />
</label>
<label class="lf-cons-row">
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="Password"
required
/>
</label>
<button type="submit" class="lf-cons-btn">Continue</button>
</article>
</form> .lf-cons {
position: relative;
isolation: isolate;
width: 100%;
max-width: 320px;
border-radius: 18px;
overflow: hidden;
background: radial-gradient(ellipse at top, #1a1838 0%, #07071a 70%);
}
.lf-cons-sky {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.lf-cons-star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
animation: lfConsTwinkle 3s ease-in-out infinite;
}
.lf-cons-star.s1 {
top: 12%;
left: 18%;
animation-delay: 0s;
}
.lf-cons-star.s2 {
top: 24%;
left: 70%;
animation-delay: 0.6s;
}
.lf-cons-star.s3 {
top: 38%;
left: 32%;
animation-delay: 1.2s;
width: 1.5px;
height: 1.5px;
}
.lf-cons-star.s4 {
top: 54%;
left: 84%;
animation-delay: 1.8s;
}
.lf-cons-star.s5 {
top: 68%;
left: 14%;
animation-delay: 0.3s;
width: 1.5px;
height: 1.5px;
}
.lf-cons-star.s6 {
top: 80%;
left: 56%;
animation-delay: 1s;
}
@keyframes lfConsTwinkle {
0%,
100% {
opacity: 0.35;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.4);
}
}
.lf-cons-shoot {
position: absolute;
top: 18%;
left: -10%;
width: 60px;
height: 1.5px;
background: linear-gradient(90deg, transparent, #fff, transparent);
transform: rotate(-18deg);
animation: lfConsShoot 6s ease-in infinite;
opacity: 0;
}
@keyframes lfConsShoot {
0%,
88% {
transform: translateX(0) rotate(-18deg);
opacity: 0;
}
92% {
opacity: 1;
}
100% {
transform: translateX(380px) rotate(-18deg);
opacity: 0;
}
}
.lf-cons-card {
position: relative;
z-index: 1;
margin: 22px;
padding: 22px;
border-radius: 14px;
background: rgba(7, 7, 26, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
display: grid;
gap: 11px;
}
.lf-cons-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
}
.lf-cons-sub {
margin: -6px 0 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.lf-cons-row input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: #fff;
outline: none;
transition: border-color 0.15s;
}
.lf-cons-row input::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.lf-cons-row input:focus {
border-color: rgba(255, 255, 255, 0.5);
}
.lf-cons-btn {
margin-top: 4px;
padding: 10px;
background: linear-gradient(135deg, #c4b5fd, #818cf8);
color: #07071a;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s;
}
.lf-cons-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-cons,
.lf-cons * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Brutalist StampStrength MeterPin PadInline ValidationBiometric PromptShow Password ToggleOTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic Link
View the full collection →