WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulário de Login com Glassmorphism
2906
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
18 October 2025
Exemplo básico de botão HTML
5 August 2025
Código de Mete
13 May 2025
Página de login do Roblox HTML CSS
HTML
Copy
Andev Web
Login Form
Enter your email
Enter your password
Remember me
Forgot password?
Log In
Don't have an account?
Register
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://i.postimg.cc/0jv27Qvw/20008380-645221846.jpg"), #000; background-position: center; background-size: cover; z-index: -1; } .wrapper { width: 400px; border-radius: 15px; padding: 40px; text-align: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); transition: all 0.3s ease; } .wrapper:hover { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5); } form { display: flex; flex-direction: column; } h2 { font-size: 2.2rem; margin-bottom: 25px; color: #ffffff; letter-spacing: 1px; } .input-field { position: relative; border-bottom: 2px solid rgba(255, 255, 255, 0.3); margin: 20px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #ffffff; font-size: 16px; pointer-events: none; transition: 0.3s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #ffffff; padding: 0 10px; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.9rem; top: 10px; transform: translateY(-150%); color: #ffdde1; } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #ffffff; } #remember { accent-color: #ffdde1; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #ffdde1; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background-color: #271930; color: #ffffff; font-weight: 600; border: none; padding: 15px 20px; cursor: pointer; border-radius: 25px; font-size: 16px; border: 2px solid transparent; transition: all 0.3s ease; } button:hover { color: #000000; background: rgba(255, 255, 255, 0.2); border-color: #ffffff; } .register { text-align: center; margin-top: 30px; color: #ffffff; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */