WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tela de Login
3855
anelym
Abrir en el editor
Video
Publica tu código
3
Recomendado
23 August 2025
Estructura HTML del contenedor de animación CSS
1 July 2025
Formulario de inicio de sesión moderno V2
17 May 2025
Tarjeta moderna con giro
HTML
Copy
Login
Welcome
Forgot password?
Login
Don't have an account?
sign up
CSS
Copy
body{ background: url(https://static.vecteezy.com/system/resources/previews/007/218/724/original/beautiful-purple-particles-with-lens-flare-on-purple-gradient-color-background-luxury-background-design-element-free-photo.jpg) no-repeat; background-position: center; background-size: cover; width: 400px; height: 600px; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 350px; height: 350px; text-align: center; border: 1px solid rgb(241, 241, 241); border-radius: 12px; padding: 10px 20px; background: transparent; backdrop-filter: blur(6px); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5); } .wrapper h2{ font-size: 30px; color: #fffefe; } .input-field { position: relative; } .input-field input[type="email"], .input-field input[type="password"] { border-radius: 10px; background: transparent; margin: 15px; border: 2px solid rgb(255, 255, 255); width: 280px; height: 2px; padding: 20px 40px 20px 20px; backdrop-filter: blur(15px); } .input-field i { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; color: rgb(252, 252, 252); } input::placeholder { color: rgb(255, 255, 255); } .input-field input[type="email"]:focus::placeholder, .input-field input[type="password"]:focus::placeholder { transform: translateY(-100%); transition: transform 0,2s ease-in-out; font-size: 14px; } .input-field input[type="email"]:not(:focus)::placeholder, .input-field input[type="password"]:not(:focus)::placeholder { transform: translateY(0%); transition: transform 0.2s ease-in-out; font-size: 16px; } a.forgot { text-decoration: none; position: relative; color: rgb(255, 255, 255); } a.forgot:hover { text-decoration: underline; color: #fffffffd; } a.sign-up { text-decoration: none; color: rgba(255, 255, 255, 0.712); } a.sign-up:hover { text-decoration: underline; color: #fffffffd; } .wrapper .login{ background: #fff; border: none; outline: none; cursor: pointer; font-weight: 600px; border-radius: 45px; width: 200px; height: 30px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */