WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tela de Login
3441
anelym
Open In Editor
Publish Your Code
Recommended
10 February 2025
HTML CSS Login Form Code
24 September 2025
Interactive SVG Dragon Graphic Code
3 March 2025
OrbDesign
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) */