WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Blur login form
4468
Andev.web
Open In Editor
Publish Your Code
Recommended
14 October 2023
Login Form
18 September 2024
Hacker Login
23 August 2025
HTML Login Form with Password Toggle
HTML
Copy
ANDEV WEB
Inicio
Usuario
Contraseña
Recordar
Olvidé la Contraseña
Iniciar
No tengo una cuenta
Registrate
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins',sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-image: url("https://images.unsplash.com/photo-1668871333606-ef8461d43922?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); background-repeat: no-repeat; background-position: center; background-size: cover; } section { position: relative; max-width: 400px; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 20px; backdrop-filter: blur(55px); display: flex; justify-content: center; align-items: center; padding: 2rem 3rem; } h1 { font-size: 2rem; color: #fff; text-align: center; } .inputbox { position: relative; margin: 30px 0; max-width: 310px; border-bottom: 2px solid #fff; } .inputbox label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); color: #fff; font-size: 1rem; pointer-events: none; transition: all 0.5s ease-in-out; } input:focus ~ label, input:valid ~ label { top: -5px; } .inputbox input { width: 100%; height: 60px; background: transparent; border: none; outline: none; font-size: 1rem; padding: 0 35px 0 5px; color: #fff; } .inputbox ion-icon { position: absolute; right: 8px; color: #fff; font-size: 1.2rem; top: 20px; } .forget { margin: 35px 0; font-size: 0.85rem; color: #fff; display: flex; justify-content: space-between; } .forget label { display: flex; align-items: center; } .forget label input { margin-right: 3px; } .forget a { color: #fff; text-decoration: none; font-weight: 600; } .forget a:hover { text-decoration: underline; } button { width: 100%; height: 40px; border-radius: 40px; background-color: rgb(255, 255,255, 1); border: none; outline: none; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.4s ease; } button:hover { background-color: rgb(255, 255,255, 0.5); } .register { font-size: 0.9rem; color: #fff; text-align: center; margin: 25px 0 10px; } .register p a { text-decoration: none; color: #fff; font-weight: 600; } .register p a:hover { text-decoration: underline; }
JS
Copy