WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Connexion Tissu
3664
anelym
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 August 2025
Modèle HTML CSS de formulaire de connexion et d'inscription
17 July 2025
Formulaire d'inscription de connexion rotatif 3D HTML CSS
21 July 2024
Formulaire de connexion animé
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) */