WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Plantilla HTML/CSS de formulario de inicio de sesión y registro
1,336
oliaa
Abrir en el editor
Publica tu código
0
Recomendado
19 November 2025
Pantalla de carga animada con puntos en CSS
18 March 2026
Formulario de inicio de sesión CSS animado
11 April 2025
Botón de página no válida
HTML
Copy
Login / Sign Up
Login
Sign Up
Welcome Back
Email
Password
Login
Forgot Password?
Create Account
Username
Email
Password
Sign Up
CSS
Copy
/* Reset */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", system-ui, sans-serif; } /* Background with gradient + glow */ body { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); overflow: hidden; } /* Decorative glowing orbs */ body::before, body::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); z-index: 0; } body::before { width: 400px; height: 400px; top: -100px; left: -100px; background: rgba(0, 212, 255, 0.6); } body::after { width: 400px; height: 400px; bottom: -120px; right: -100px; background: rgba(255, 0, 180, 0.5); } /* Container (glass effect) */ .container { width: 380px; background: rgba(255, 255, 255, 0.08); border-radius: 20px; padding-bottom: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.15); position: relative; z-index: 1; overflow: hidden; animation: fadeIn 0.8s ease; } /* Tabs */ .tabs { display: flex; } .tabs button { flex: 1; padding: 14px; border: none; background: transparent; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.65); transition: all 0.3s ease; cursor: pointer; } .tabs button.active { color: #fff; background: linear-gradient(90deg, #00d4ff, #ff00b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 17px; } /* Forms */ .form { padding: 24px; display: none; animation: slide 0.4s ease; } .form.active { display: block; } .form h2 { margin-bottom: 18px; font-size: 24px; text-align: center; background: linear-gradient(90deg, #00d4ff, #ff00b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Input groups */ .input-group { margin-bottom: 18px; } .input-group label { font-size: 13px; color: rgba(255, 255, 255, 0.7); display: block; margin-bottom: 6px; } .input-group input { width: 100%; padding: 12px; border: none; border-radius: 10px; font-size: 15px; background: rgba(255, 255, 255, 0.15); color: #fff; outline: none; transition: background 0.3s ease, box-shadow 0.3s ease; } .input-group input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 8px rgba(0, 212, 255, 0.8); } /* Buttons */ .form button { width: 100%; padding: 12px; background: linear-gradient(90deg, #00d4ff, #ff00b4); color: #fff; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.3s ease; } .form button:hover { transform: translateY(-3px); box-shadow: 0 0 20px rgba(0, 212, 255, 0.7), 0 0 30px rgba(255, 0, 180, 0.6); } /* Extra links */ .extra { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .extra a { color: #00d4ff; text-decoration: none; font-weight: 500; } .extra a:hover { text-decoration: underline; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: scale(0.9);} to { opacity: 1; transform: scale(1);} } @keyframes slide { from { opacity: 0; transform: translateY(15px);} to { opacity: 1; transform: translateY(0);} }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */