WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Modulo di Accesso con Glassmorphism
2907
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 October 2025
Animazione di caricamento CSS Struttura HTML
16 June 2025
Un codice di Mete
29 December 2024
Un codice di wsss
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) */