Interactive Lamp Login Reveal Form
A futuristic lamp-controlled login form with glowing light effects, glassmorphism styling and smooth JavaScript reveal interaction.
Login
Enter your details to continue.
<div class="cr-lamp-stage">
<div class="cr-lamp-scene" id="lampScene">
<div class="cr-lamp-side">
<div class="cr-lamp">
<div class="cr-lamp-shade"></div>
<div class="cr-lamp-light"></div>
<div class="cr-lamp-stem"></div>
<div class="cr-lamp-base"></div>
<button
class="cr-lamp-switch"
id="lampSwitch"
type="button"
aria-label="Toggle login lamp"
>
<span class="cr-switch-line"></span>
<span class="cr-switch-dot"></span>
</button>
</div>
</div>
<div class="cr-login-panel" id="loginPanel">
<span class="cr-login-kicker">
WELCOME BACK
</span>
<h2>Login</h2>
<p>
Enter your details to continue.
</p>
<label>Email</label>
<input
type="email"
placeholder="you@example.com"
>
<label>Password</label>
<input
type="password"
placeholder="••••••••"
>
<button
class="cr-login-btn"
type="button"
>
Sign In
<span>→</span>
</button>
</div>
</div>
</div>*{
box-sizing:border-box;
}
.cr-lamp-stage{
width:100%;
min-height:720px;
display:flex;
align-items:center;
justify-content:center;
padding:55px 24px;
background:
radial-gradient(circle at 28% 45%,rgba(34,211,238,.08),transparent 30%),
radial-gradient(circle at 72% 50%,rgba(168,85,247,.08),transparent 32%),
#050914;
font-family:Inter,Arial,sans-serif;
overflow:visible;
}
.cr-lamp-scene{
position:relative;
width:min(900px,100%);
min-height:560px;
display:flex;
align-items:center;
justify-content:center;
gap:105px;
padding:50px 55px;
overflow:visible;
border:1px solid rgba(82,120,165,.30);
border-radius:30px;
background:
radial-gradient(circle at 30% 50%,rgba(34,211,238,.04),transparent 32%),
linear-gradient(145deg,#06101d,#020711);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 30px 80px rgba(0,0,0,.45);
}
.cr-lamp-scene::before{
content:"";
position:absolute;
width:500px;
height:500px;
left:30px;
top:50%;
transform:translateY(-50%) scale(.45);
border-radius:50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.24) 0%,
rgba(133,237,255,.20) 13%,
rgba(34,211,238,.15) 28%,
rgba(75,106,255,.10) 45%,
rgba(168,85,247,.06) 58%,
transparent 72%
);
filter:blur(22px);
opacity:0;
pointer-events:none;
transition:transform .7s ease,opacity .7s ease;
}
.cr-lamp-scene.is-on::before{
opacity:1;
transform:translateY(-50%) scale(1);
}
.cr-lamp-scene::after{
content:"";
position:absolute;
width:360px;
height:60px;
left:75px;
bottom:55px;
border-radius:50%;
background:
linear-gradient(
90deg,
transparent,
rgba(34,211,238,.22),
rgba(98,86,255,.16),
transparent
);
filter:blur(25px);
opacity:0;
transition:opacity .6s ease;
pointer-events:none;
}
.cr-lamp-scene.is-on::after{
opacity:1;
}
.cr-lamp-side{
position:relative;
z-index:4;
width:260px;
height:380px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.cr-lamp{
position:relative;
width:210px;
height:350px;
}
.cr-lamp-shade{
position:absolute;
top:38px;
left:50%;
width:170px;
height:82px;
transform:translateX(-50%);
border-radius:88px 88px 25px 25px;
background:
linear-gradient(
165deg,
rgba(255,255,255,.96) 0%,
rgba(216,245,255,.94) 38%,
rgba(119,178,206,.90) 100%
);
border:1px solid rgba(255,255,255,.85);
box-shadow:
inset 0 7px 14px rgba(255,255,255,.90),
inset 0 -8px 15px rgba(36,93,126,.20),
0 12px 28px rgba(0,0,0,.35);
z-index:7;
transition:background .5s ease,box-shadow .5s ease;
}
.cr-lamp-shade::before{
content:"";
position:absolute;
inset:4px;
border-radius:82px 82px 21px 21px;
border:1px solid rgba(255,255,255,.30);
pointer-events:none;
}
.cr-lamp-shade::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:-4px;
height:9px;
border-radius:50%;
background:rgba(199,244,255,.40);
filter:blur(4px);
opacity:.3;
transition:opacity .5s ease,box-shadow .5s ease;
}
.cr-lamp-scene.is-on .cr-lamp-shade{
background:
linear-gradient(
165deg,
#ffffff 0%,
#e7fcff 38%,
#9feeff 100%
);
box-shadow:
inset 0 7px 16px rgba(255,255,255,1),
inset 0 -7px 16px rgba(34,211,238,.14),
0 0 20px rgba(255,255,255,.60),
0 0 48px rgba(34,211,238,.48),
0 0 90px rgba(34,211,238,.22),
0 0 125px rgba(111,79,255,.12);
}
.cr-lamp-scene.is-on .cr-lamp-shade::after{
opacity:1;
box-shadow:
0 0 18px #ffffff,
0 0 38px #22d3ee;
}
.cr-lamp-light{
position:absolute;
z-index:2;
top:105px;
left:50%;
width:255px;
height:245px;
transform:translateX(-50%);
clip-path:polygon(31% 0,69% 0,100% 100%,0 100%);
background:
linear-gradient(
180deg,
rgba(235,253,255,.38) 0%,
rgba(94,225,255,.20) 32%,
rgba(34,211,238,.08) 68%,
transparent 100%
);
filter:blur(5px);
opacity:0;
transition:opacity .6s ease;
}
.cr-lamp-scene.is-on .cr-lamp-light{
opacity:1;
}
.cr-lamp-stem{
position:absolute;
z-index:5;
top:112px;
left:50%;
width:12px;
height:182px;
transform:translateX(-50%);
border-radius:8px;
background:
linear-gradient(
90deg,
#4d6f86 0%,
#cdebf7 24%,
#ffffff 48%,
#a8cedf 68%,
#45667e 100%
);
box-shadow:
inset 1px 0 2px rgba(255,255,255,.85),
0 0 8px rgba(170,231,255,.18);
transition:box-shadow .5s ease;
}
.cr-lamp-scene.is-on .cr-lamp-stem{
box-shadow:
inset 1px 0 2px rgba(255,255,255,.95),
0 0 10px rgba(255,255,255,.35),
0 0 20px rgba(34,211,238,.22);
}
.cr-lamp-stem::after{
content:"";
position:absolute;
left:50%;
bottom:-8px;
width:34px;
height:14px;
transform:translateX(-50%);
border-radius:50%;
background:
linear-gradient(180deg,#dff5ff,#789db2);
border:1px solid rgba(218,247,255,.45);
box-shadow:
inset 0 2px 3px rgba(255,255,255,.55),
0 4px 8px rgba(0,0,0,.30);
}
.cr-lamp-base{
position:absolute;
z-index:6;
left:50%;
bottom:20px;
width:138px;
height:25px;
transform:translateX(-50%);
border-radius:50%;
background:
linear-gradient(
180deg,
#f4fcff 0%,
#b8dbe9 34%,
#688da4 68%,
#2a4357 100%
);
border:1px solid rgba(218,247,255,.55);
box-shadow:
inset 0 5px 6px rgba(255,255,255,.62),
inset 0 -6px 7px rgba(20,48,69,.38),
0 10px 18px rgba(0,0,0,.48);
transition:box-shadow .5s ease;
}
.cr-lamp-scene.is-on .cr-lamp-base{
box-shadow:
inset 0 5px 6px rgba(255,255,255,.72),
inset 0 -6px 7px rgba(20,48,69,.38),
0 10px 18px rgba(0,0,0,.48),
0 0 20px rgba(34,211,238,.18);
}
.cr-lamp-switch{
position:absolute;
z-index:12;
top:116px;
right:17px;
width:42px;
height:130px;
padding:0;
border:0;
outline:none;
background:transparent;
cursor:pointer;
}
.cr-switch-line{
position:absolute;
top:0;
left:50%;
width:2px;
height:92px;
transform:translateX(-50%);
background:
linear-gradient(
180deg,
#d6f8ff,
#6ba1ba,
#34546b
);
box-shadow:0 0 5px rgba(34,211,238,.22);
}
.cr-switch-dot{
position:absolute;
bottom:17px;
left:50%;
width:18px;
height:18px;
transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(
circle at 35% 30%,
#ffffff,
#55eaff 38%,
#079bb8 100%
);
border:2px solid rgba(221,253,255,.92);
box-shadow:
0 0 9px rgba(34,211,238,.90),
0 0 20px rgba(34,211,238,.42);
transition:
transform .18s ease,
background .35s ease,
box-shadow .35s ease;
}
.cr-lamp-switch:hover .cr-switch-dot{
transform:translateX(-50%) scale(1.16);
}
.cr-lamp-switch:active .cr-switch-dot{
transform:
translateX(-50%)
translateY(7px)
scale(.96);
}
.cr-lamp-scene.is-on .cr-switch-dot{
background:
radial-gradient(
circle at 35% 30%,
#ffffff,
#d58cff 38%,
#8c3df0 100%
);
border-color:#f0dcff;
box-shadow:
0 0 10px rgba(220,157,255,.95),
0 0 25px rgba(168,85,247,.62),
0 0 42px rgba(168,85,247,.24);
}
.cr-login-panel{
position:relative;
z-index:6;
width:330px;
padding:38px 32px 34px;
border-radius:26px;
background:
linear-gradient(
145deg,
rgba(18,41,69,.52),
rgba(7,16,31,.64)
);
border:1px solid rgba(152,221,255,.26);
backdrop-filter:blur(24px) saturate(165%);
-webkit-backdrop-filter:blur(24px) saturate(165%);
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.11),
inset -1px -1px 0 rgba(108,75,255,.08),
0 28px 65px rgba(0,0,0,.42);
opacity:0;
transform:translateX(55px) scale(.90);
pointer-events:none;
transition:
opacity .6s ease,
transform .65s cubic-bezier(.2,.8,.2,1),
box-shadow .6s ease;
}
.cr-login-panel::before{
content:"";
position:absolute;
inset:5px;
border-radius:21px;
border:1px solid rgba(255,255,255,.045);
pointer-events:none;
}
.cr-login-panel::after{
content:"";
position:absolute;
z-index:-1;
inset:-1px;
border-radius:26px;
background:
linear-gradient(
135deg,
rgba(34,211,238,.13),
transparent 40%,
transparent 65%,
rgba(168,85,247,.14)
);
filter:blur(12px);
opacity:0;
transition:opacity .6s ease;
}
.cr-lamp-scene.is-on .cr-login-panel{
opacity:1;
transform:translateX(0) scale(1);
pointer-events:auto;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.13),
inset -1px -1px 0 rgba(168,85,247,.10),
-18px 0 55px rgba(34,211,238,.07),
0 30px 70px rgba(0,0,0,.46),
0 0 35px rgba(34,211,238,.10),
0 0 55px rgba(168,85,247,.07);
}
.cr-lamp-scene.is-on .cr-login-panel::after{
opacity:1;
}
.cr-login-kicker{
display:inline-block;
margin-bottom:9px;
color:#22d3ee;
font-size:9px;
font-weight:900;
letter-spacing:1.8px;
}
.cr-login-panel h2{
margin:0 0 8px;
color:#ffffff;
font-size:30px;
font-weight:900;
letter-spacing:-.5px;
}
.cr-login-panel p{
margin:0 0 26px;
color:#8fa4bd;
font-size:13px;
line-height:1.5;
}
.cr-login-panel label{
display:block;
margin:0 0 7px;
color:#b1c1d4;
font-size:11px;
font-weight:700;
}
.cr-login-panel input{
width:100%;
height:46px;
margin-bottom:17px;
padding:0 15px;
border:1px solid #263c58;
border-radius:11px;
outline:none;
background:
linear-gradient(
145deg,
rgba(2,10,21,.80),
rgba(7,19,35,.74)
);
color:#ffffff;
font-family:inherit;
box-shadow:
inset 4px 4px 8px rgba(0,0,0,.42),
inset -2px -2px 5px rgba(255,255,255,.018);
transition:
border-color .25s ease,
box-shadow .25s ease;
}
.cr-login-panel input::placeholder{
color:#526984;
}
.cr-login-panel input:focus{
border-color:rgba(34,211,238,.72);
box-shadow:
inset 4px 4px 8px rgba(0,0,0,.42),
0 0 0 2px rgba(34,211,238,.05),
0 0 15px rgba(34,211,238,.12);
}
.cr-login-btn{
width:100%;
height:47px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:3px;
border:1px solid rgba(109,221,255,.55);
border-radius:11px;
background:
linear-gradient(
110deg,
#08a9cb 0%,
#357de8 45%,
#8750ee 100%
);
color:#ffffff;
font-family:inherit;
font-size:12px;
font-weight:800;
cursor:pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
0 9px 24px rgba(66,91,234,.25);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.cr-login-btn span{
display:inline-block;
font-size:17px;
transition:transform .25s ease;
}
.cr-login-btn:hover{
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 12px 28px rgba(66,91,234,.32),
0 0 20px rgba(34,211,238,.16),
0 0 28px rgba(168,85,247,.12);
}
.cr-login-btn:hover span{
transform:translateX(5px);
}
@media(max-width:760px){
.cr-lamp-stage{
min-height:900px;
padding:35px 14px;
}
.cr-lamp-scene{
min-height:820px;
flex-direction:column;
gap:5px;
padding:45px 20px;
}
.cr-lamp-side{
width:240px;
height:350px;
}
.cr-login-panel{
width:min(330px,100%);
}
}document.addEventListener(
'DOMContentLoaded',
function() {
var lampScene =
document.getElementById('lampScene');
var lampSwitch =
document.getElementById('lampSwitch');
if (lampSwitch) {
lampSwitch.addEventListener(
'click',
function() {
if (lampScene) {
lampScene.classList.toggle(
'is-on'
);
}
}
);
}
}
);How This Interactive Lamp Login Reveal Form Works
The Interactive Lamp Login Reveal Form uses a lamp switch as the control for revealing and hiding a login panel. Instead of displaying the form immediately, the component starts with the lamp turned off and the login panel visually hidden. Clicking the hanging switch changes a single CSS state class, which activates the lamp lighting effects and brings the form into view.
The main .cr-lamp-scene can grow up to 900px wide and has a minimum height of 560px. It uses Flexbox to place the lamp and login panel next to each other with a 105px gap. The dark background combines a radial gradient with a linear-gradient(145deg, #06101d, #020711), while a subtle border, 30px border radius, and shadow define the scene.
The lamp itself is built entirely from HTML elements and CSS rather than an image. Separate elements create the shade, light beam, stem, base, switch line, and switch dot. The shade is 170px wide and uses layered gradients, inset shadows, and rounded corners to produce its shape. The metallic-looking stem and base are also created with multi-stop linear gradients.
The .cr-lamp-light element creates the light beam beneath the shade. It measures 255 × 245px and uses clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%) to form a widening beam. Its opacity starts at zero. Once the lamp is switched on, .cr-lamp-scene.is-on .cr-lamp-light changes the opacity to 1 over a .6s transition.
Additional illumination comes from the scene’s ::before and ::after pseudo-elements. The ::before element creates a large blurred radial glow that grows from scale(.45) to scale(1). The ::after element creates a blurred horizontal glow near the bottom of the scene. Both become visible only when the is-on class is present.
The login panel follows the same state. Initially, .cr-login-panel has opacity: 0, translateX(55px) scale(.90), and pointer-events: none. When the lamp turns on, it moves to translateX(0) scale(1), reaches full opacity, and enables pointer events. Its .65s transform transition uses cubic-bezier(.2,.8,.2,1), producing a controlled reveal rather than an instant appearance.
JavaScript handles only the state change. After DOMContentLoaded, it finds lampScene and lampSwitch, then listens for a click on the switch. Each click calls classList.toggle('is-on'), so the same control can turn the interface on and off. For more details about this method, see the MDN classList documentation.
Customizing the Interactive Lamp Login Reveal Form
The component’s main visual details can be adjusted through its existing CSS values without changing how the toggle logic works.
- Change the 900px scene width, 560px minimum height, or 30px border radius to adjust the main container.
- Edit cyan values such as
#22d3eeand violet values such as#a855f7to create a different lighting palette. - Adjust the
.7s,.6s, and `.65s transitions to change how quickly the glow, beam, and login panel appear. - Modify the
clip-pathcoordinates on.cr-lamp-lightto make the light beam narrower or wider. - Change the 170 × 82px lamp shade dimensions or its gradients to alter the lamp’s appearance.
- Adjust the login panel’s 330px width, 26px border radius, and 24px backdrop blur.
- Change
translateX(55px) scale(.90)to control where the hidden login panel starts its reveal. - Modify the
@media(max-width:760px)breakpoint and mobile spacing to suit your layout.
Where to Use This Interactive Lamp Login Reveal Form
The interaction works best when the login experience can be presented as a deliberate reveal rather than a permanently visible form.
- Creative login and authentication pages
- Developer portfolio projects
- Experimental landing pages
- Member or account access screens
- UI interaction demonstrations
- Dark-themed application interfaces
For an authentication interface that switches between two forms instead, the Animated S-Wave Login & Sign Up Form provides a related approach. For real authentication, this lamp component still needs to be connected to form validation and server-side login logic because the included JavaScript only controls the visual reveal.
Frequently Asked Questions
Does the lamp actually control the login panel?
Yes. Clicking the lamp switch toggles the is-on class on .cr-lamp-scene. CSS selectors using that class simultaneously reveal the light effects and login panel.
Is the lamp created with an image?
No. The lamp is assembled from HTML elements styled with CSS. Gradients, border radii, shadows, pseudo-elements, and clip-path create the shade, stem, base, switch, glow, and light beam.
Does the Sign In button authenticate a user?
No. The current JavaScript does not process the email or password and does not attach any behavior to the Sign In button. Authentication would need to be implemented separately.
Is the layout responsive?
Yes. At widths below 760px, the scene switches from a horizontal Flexbox layout to flex-direction: column. Its minimum height becomes 820px, the gap is reduced to 5px, and the login panel uses width: min(330px, 100%).
The Interactive Lamp Login Reveal Form keeps its JavaScript small by using one is-on class as the shared state, while CSS handles the lamp illumination, switch appearance, glow effects, and login panel transition.