WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Glowing Light Login Form
2387
Andev.web
Open In Editor
Publish Your Code
Recommended
19 May 2025
bomb login
23 August 2025
Turkish Login Page HTML Template
21 August 2025
Login & Registration Form (HTML, CSS, JS)
HTML
Copy
Andev Web
off
on
Login
Email
Password
Remember me
Forgot Password?
Login
Don't have an account?
Register
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #151f28; overflow: hidden; } .login-box { position: relative; width: 400px; height: 450px; background: #191919; border-radius: 20px; display: flex; justify-content: center; align-items: center; } h2 { font-size: 2em; color: #fff; text-align: center; transition: .5s ease; } .input-check:checked~h2 { color: #00f7ff; text-shadow: 0 0 15px #00f7ff, 0 0 30px #00f7ff; } .input-box { position: relative; width: 310px; margin: 30px 0; } .input-box .input-line { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2.5px; background: #fff; transition: .5s ease; } .input-check:checked~.input-box .input-line { background: #00f7ff; box-shadow: 0 0 10px #00f7ff; } .input-box label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-size: 1em; color: #fff; pointer-events: none; transition: .5s ease; } .input-box input:focus~label, .input-box input:valid~label { top: -5px; } .input-check:checked~.input-box label { color: #00f7ff; text-shadow: 0 0 10px #00f7ff; } .input-box input { width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 1em; color: #fff; padding: 0 35px 0 5px; transition: .5s ease; } .input-check:checked~.input-box input { color: #00f7ff; text-shadow: 0 0 5px #00f7ff; } .input-box .icon { position: absolute; right: 8px; color: #fff; font-size: 1.2em; line-height: 57px; transition: .5s ease; } .input-check:checked~.input-box .icon { color: #00f7ff; filter: drop-shadow(0 0 5px #00f7ff); } .remember-forgot { color: #fff; font-size: .9em; margin: -15px 0 15px; display: flex; justify-content: space-between; transition: .5s ease; } .input-check:checked~.remember-forgot { color: #00f7ff; text-shadow: 0 0 10px #00f7ff; } .remember-forgot label input { accent-color: #fff; margin-right: 3px; transition: .5s ease; } .input-check:checked~.remember-forgot label input { accent-color: #00f7ff; } .remember-forgot a { color: #fff; text-decoration: none; transition: color .5s ease; } .remember-forgot a:hover { text-decoration: underline; } .input-check:checked~.remember-forgot a { color: #00f7ff; } button { width: 100%; height: 40px; background: #fff; border: none; outline: none; border-radius: 40px; cursor: pointer; font-size: 1em; color: #191919; font-weight: 500; transition: .5s ease; } .glowing-light { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 500px; height: 10px; background: #00f7ff; border-radius: 20px; } .input-check:checked~button { background: #00f7ff; box-shadow: 0 0 15px #00f7ff, 0 0 15px #00f7ff; } .register-link { color: #fff; font-size: .9em; text-align: center; margin: 25px 0 10px; transition: .5s ease; } .input-check:checked~.register-link { color: #00f7ff; text-shadow: 0 0 10px #00f7ff; } .register-link p a { color: #fff; text-decoration: none; font-weight: 600; transition: color .5s ease; } .register-link p a:hover { text-decoration: underline; } .input-check:checked~.register-link p a { color: #00f7ff; } .light { position: absolute; top: -200%; left: 0; width: 100%; height: 950px; background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255, 0) 90%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); pointer-events: none; transition: .5s ease; } .input-check:checked~.light { top: -90%; } .toggle { position: absolute; top: 20px; right: -70px; width: 60px; height: 120px; background: #191919; border-radius: 10px; } .toggle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 80%; background: #000; } .toggle::after { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 45px; height: 45px; background: #333; border: 2px solid #191919; border-radius: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, .5); transition: .5s ease; } .input-check:checked~.toggle::after { top: 65px; } .input-check { position: absolute; right: -70px; z-index: 1; opacity: 0; } .toggle .text { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1em; z-index: 1; text-transform: uppercase; pointer-events: none; transition: .5s ease; } .toggle .text.off { opacity: 1; } .input-check:checked~.toggle .text.off { top: 76px; opacity: 0; } .toggle .text.on { opacity: 0; } .input-check:checked~.toggle .text.on { top: 76px; opacity: 1; color: #00f7ff; text-shadow: 0 0 15px #00f7ff, 0 0 30px #00f7ff, 0 0 45px #00f7ff, 0 0 60px #00f7ff; }
JS
Copy