Researching the design of a website login page makes all the difference in the process of creating a website, a good login page will not only enhance the user’s experience but also make a website look more professional.
Here are 10+ website login page designs with HTML and CSS code you can just copy and apply for your next project. Whether you like minimalism or a complete creative interface, we have it for anybody.
Futuristic Website Login Page Design
The Futuristic Login Page Design is very glamorous and will keep you sunk in as you log in. Powered by dynamic animations with gradient backgrounds, this website login page design gives sleek, modern looks that fit in with other tech-savvy websites or applications. Glowing effects and smooth transitions add sophistication while being user-friendly and crystal clear.
This login UI design is excellent for developers who want to blend aesthetic appeal with functionality. It presents a responsive layout and has seamless transitions, hence being both visually appealing and practical for user
Copy the code with the below button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Website Login Page Design"</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #00adb5, #393e46, #0077b6);
background-size: 400% 400%;
color: white;
animation: background-glow 10s ease infinite;
}
@keyframes background-glow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-container {
background: rgba(255, 255, 255, 0.08);
padding: 40px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
width: 100%;
max-width: 400px;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-container:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 15px;
background: linear-gradient(45deg, #00adb5, #393e46, #0077b6);
background-size: 400% 400%;
z-index: -1;
filter: blur(12px);
animation: subtle-glow 10s ease infinite;
}
@keyframes subtle-glow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h2 {
text-align: center;
margin-bottom: 20px;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
animation: color-change 5s ease infinite;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 15px;
background: transparent;
border: none;
border-bottom: 2px solid;
color: #eeeeee;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
animation: border-color-change 5s ease infinite;
}
.input-group input:focus {
border-color: #00adb5;
}
.input-group label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 16px;
transition: 0.3s ease;
pointer-events: none;
color: rgba(255, 255, 255, 0.6);
animation: color-change 5s ease infinite;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #00adb5, #0077b6);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 2px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #0077b6, #00adb5);
}
.signup-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.signup-link a {
color: #00adb5;
text-decoration: none;
animation: color-change 5s ease infinite;
}
.signup-link a:hover {
text-decoration: underline;
}
@keyframes color-change {
0% { color: #00adb5; }
25% { color: #00ffc6; }
50% { color: #ff577f; }
75% { color: #ffc93c; }
100% { color: #00adb5; }
}
@keyframes border-color-change {
0% { border-color: #00adb5; }
25% { border-color: #00ffc6; }
50% { border-color: #ff577f; }
75% { border-color: #ffc93c; }
100% { border-color: #00adb5; }
}
</style>
</head>
<body>
<div class="login-container">
<form class="login-form">
<h2>Login</h2>
<div class="input-group">
<input type="email" id="email" name="email" required>
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="password" id="password" name="password" required>
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
Black Login Page Template
The Black Login Page Template shall be a clean, minimalistic login web template design indicating professional and classy appeal. Accompanied by frosted glass effects and smooth transitions, this modern yet straightforward template is an idea of keeping the background dark and gradient. Transparent input fields and icons come accompanied by glowing hover effects for the ease of the user, making this quite a neat choice for a sleek login website template.
This Login Page Template makes easy adaptation to different screen sizes and devices with social integration options, ensuring an extremely functional and visually appealing user experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Login Page Template</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Montserrat', sans-serif;
background: linear-gradient(135deg, #000, #333);
color: #ffffff;
}
.login-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.login-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
filter: blur(30px);
z-index: 0;
opacity: 0.5;
}
h2 {
margin-bottom: 30px;
font-size: 2.5rem;
font-weight: 600;
color: #ffffff;
position: relative;
z-index: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 30px;
z-index: 1;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.6);
font-size: 20px;
pointer-events: none;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 40px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
color: #ffffff;
font-size: 16px;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
.input-group input:focus {
background-color: rgba(255, 255, 255, 0.3);
border-color: #ffffff;
}
.input-group label {
position: absolute;
top: 15px;
left: 40px;
font-size: 16px;
transition: 0.3s ease;
pointer-events: none;
color: rgba(255, 255, 255, 0.6);
z-index: 1;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -20px;
font-size: 12px;
color: #ffffff;
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #000, #444);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease, transform 0.3s ease;
z-index: 1;
}
button:hover {
background: linear-gradient(90deg, #444, #000);
transform: scale(1.05);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
z-index: 1;
}
.signup-link a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #FFD700;
text-decoration: underline;
}
.social-icons {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 15px;
z-index: 1;
}
.social-icons a {
color: #ffffff;
font-size: 1.5rem;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #FFD700;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form class="login-form">
<div class="input-group">
<i class="fas fa-envelope"></i> <!-- Email Icon -->
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email</label>
</div>
<div class="input-group">
<i class="fas fa-lock"></i> <!-- Password Icon -->
<input type="password" id="password" name="password" required placeholder=" ">
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<div class="social-icons">
<a href="#" title="Login with Google"><i class="fab fa-google"></i></a>
<a href="#" title="Login with Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" title="Login with Twitter"><i class="fab fa-twitter"></i></a>
</div>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
New Website Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elegant Login Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4C+sX3EPZkqsHX+YQxBmPB1nNnTdIj1BRxEuUBRMo+IGapZbkFxd2lrL6M0mEpM2tewFQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f2f2f2;
}
.login-container {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
width: 80%;
max-width: 900px;
overflow: hidden;
}
.login-image {
flex: 1;
background-image: url('https://images.unsplash.com/photo-1505330622279-bf7d7fc918f4?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXB1dGVyfGVufDB8fDB8fHwy');
background-size: cover;
background-position: center;
height: 100%;
min-width: 400px;
min-height: 410px;
}
.form-container {
flex: 1;
padding: 40px 30px;
text-align: center;
}
.logo {
margin-bottom: 20px;
}
.logo i {
font-size: 80px;
color: #00adb5;
}
h2 {
margin-bottom: 20px;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 15px;
background: rgba(240, 240, 240, 0.8);
border: 2px solid #00adb5;
color: #333;
font-size: 16px;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.input-group input:focus {
background-color: rgba(240, 240, 240, 1);
border-color: #00ffc6;
}
.input-group label {
position: absolute;
left: 10px;
font-size: 16px;
transition: 0.3s ease;
pointer-events: none;
color: #666;
top: 50%;
transform: translateY(-50%);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #00adb5;
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #00adb5, #0077b6);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #0077b6, #00adb5);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
}
.signup-link a {
color: #00adb5;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #00ffc6;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-image"></div>
<div class="form-container">
<div class="logo">
<i class="fas fa-user-circle"></i>
</div>
<form class="login-form">
<h2>Login</h2>
<div class="input-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="password" id="password" name="password" required placeholder=" ">
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</div>
</body>
</html>
Aesthetic Login Interface Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aesthetic Login Interface Design</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Poppins', sans-serif;
background: url('https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed; /* Forest background image */
background-size: cover;
}
.login-container {
background: rgba(0, 0, 0, 0.6);
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 2rem;
font-weight: 600;
color: #f5f5f5;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid #2E7D32;
color: #f5f5f5;
font-size: 16px;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.input-group input:focus {
background-color: rgba(255, 255, 255, 0.4);
border-color: #81C784;
}
.input-group label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
font-size: 16px;
transition: 0.3s ease;
pointer-events: none;
color: #f5f5f5;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #81C784;
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #2E7D32, #66BB6A);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #66BB6A, #2E7D32);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: white;
}
.signup-link a {
color: #81C784;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #66BB6A;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form class="login-form">
<div class="input-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="password" id="password" name="password" required placeholder=" ">
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
Elegant Login Page with HTML and CSS Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elegant Login Page with HTML and CSS Code</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
background: url('https://images.unsplash.com/photo-1542632432-44f304c2e1c4') no-repeat center center fixed;
background-size: cover;
color: #333;
}
.login-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
position: relative;
}
h2 {
margin-bottom: 20px;
font-size: 2rem;
font-weight: 700;
color: #ff4081;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #ff4081;
font-size: 20px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
background: rgba(255, 255, 255, 0.8);
border: 2px solid #ff4081;
border-radius: 8px;
color: #333;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(51, 51, 51, 0.5);
}
button {
width: 100%;
padding: 15px;
background: #ff4081;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: #e91e63;
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: #333;
}
.signup-link a {
color: #ff4081;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #e91e63;
}
.cartoon-image {
width: 80%;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<img src="https://plus.unsplash.com/premium_vector-1681433469399-815d0f3e1d75?q=80&w=3600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Cartoon Characters" class="cartoon-image"> <!-- Cartoon Image -->
<form class="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" required placeholder="Username">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
Basic Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Login Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f4f8;
}
.login-container {
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.login-form {
display: flex;
flex-direction: column;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 10px 10px 10px 0;
border: none;
border-bottom: 2px solid #ccc;
outline: none;
font-size: 16px;
}
.input-group label {
position: absolute;
top: 10px;
left: 0;
font-size: 16px;
color: #aaa;
transition: 0.3s ease;
pointer-events: none;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -20px;
font-size: 12px;
color: #3498db;
}
button {
padding: 10px;
background-color: #3498db;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
.signup-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.signup-link a {
color: #3498db;
text-decoration: none;
}
.signup-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<form class="login-form">
<h2>Login</h2>
<div class="input-group">
<input type="email" id="email" name="email" required>
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="password" id="password" name="password" required>
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
App Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Login Page</title>
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Quicksand', sans-serif;
position: relative;
color: #333;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-photo/galaxy-planets-digital-art_23-2151727641.jpg?t=st=1728748530~exp=1728752130~hmac=9b370498d4dfaedbb71f841ecd53c683bede61f716a05ccdd8a11cb77ff8dc6a&w=1800') no-repeat center center fixed;
background-size: cover;
filter: blur(2px);
z-index: -1;
}
.login-container {
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
backdrop-filter: blur(10px);
}
.website-name {
margin-bottom: 20px;
font-size: 3rem;
font-weight: 700;
color: #6a0dadbb;
text-transform: uppercase;
letter-spacing: 5px;
font-family: 'Righteous', cursive;
}
h2 {
margin-bottom: 30px;
font-size: 2rem;
font-weight: 700;
color: #921efe;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #a74aff;
font-size: 20px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid #a74aff;
border-radius: 8px;
color: #fff;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #6a0dad, #a74aff);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #4e009b, #6a0dad);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: #000000;
}
.signup-link a {
color: #a74aff;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #6a0dad;
}
.social-icons {
margin-top: 15px;
}
.social-icons i {
color: #a74aff;
margin: 0 10px;
font-size: 20px;
transition: color 0.3s ease;
}
.social-icons i:hover {
color: #6a0dad;
}
</style>
</head>
<body>
<div class="login-container">
<div class="website-name">Decode Fix</div>
<h2>Login</h2>
<form class="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" required placeholder="Username">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
<div class="social-icons">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-twitter-square"></i>
</div>
</form>
</div>
</body>
</html>
Modern Login Page Design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Login Page Design</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
background: url('https://images.unsplash.com/photo-1605810230434-7631ac76ec81?w=1000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRlY2hub2xvZ3l8ZW58MHx8MHx8fDA%3D') no-repeat center center fixed;
background-size: cover;
color: #000000;
}
.login-container {
background: rgba(25, 25, 25, 0.9);
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
position: relative;
overflow: hidden;
}
h2 {
margin-bottom: 30px;
font-size: 2rem;
font-weight: 700;
color: #00ffcc;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #00ffcc;
font-size: 20px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(0, 255, 204, 0.5);
border-radius: 8px;
color: #ffffff;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.input-group input:focus {
border-color: #00ffcc;
box-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #00ffcc, #007f7f);
border: none;
color: black;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: rgba(0, 255, 204, 0.8);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: #ffffff;
}
.signup-link a {
color: #00ffcc;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #ffd700;
}
.social-icons {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 15px;
}
.social-icons a {
color: #00ffcc;
font-size: 1.5rem;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #ffd700;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form class="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" required placeholder="Username">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<button type="submit">Login</button>
<div class="social-icons">
<a href="#" title="Login with Google"><i class="fab fa-google"></i></a>
<a href="#" title="Login with Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" title="Login with Twitter"><i class="fab fa-twitter"></i></a>
</div>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
Admin Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imaginative Login Page</title>
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Quicksand', sans-serif;
background: linear-gradient(120deg, #FFABAB, #FFC3A0, #FF677D);
position: relative;
color: #333;
}
.login-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
backdrop-filter: blur(10px);
}
.website-name {
margin-bottom: 20px;
font-size: 3rem;
font-weight: 700;
color: #FF677D;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.6);
font-family: 'Righteous', cursive;
}
h2 {
margin-bottom: 30px;
font-size: 2rem;
font-weight: 700;
color: #FFABAB;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #FF677D;
font-size: 20px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #FF677D;
border-radius: 8px;
color: #333;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(51, 51, 51, 0.6);
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #FFABAB, #FFC3A0);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #FF677D, #FFABAB);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: #333;
}
.signup-link a {
color: #FF677D;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #FFABAB;
}
.social-icons {
margin-top: 15px;
}
.social-icons i {
color: #FF677D;
margin: 0 10px;
font-size: 20px;
transition: color 0.3s ease;
}
.social-icons i:hover {
color: #FFABAB;
}
</style>
</head>
<body>
<div class="login-container">
<div class="website-name">Decode Fix</div>
<h2>Login</h2>
<form class="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" required placeholder="Username">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
<div class="social-icons">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-twitter-square"></i>
</div>
</form>
</div>
</body>
</html>
Sleek Login Interface
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sleek Login Interface</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4C+sX3EPZkqsHX+YQxBmPB1nNnTdIj1BRxEuUBRMo+IGapZbkFxd2lrL6M0mEpM2tewFQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f3e5ab, #e09f3e);
background-repeat: no-repeat;
background-attachment: fixed;
color: #333;
}
.login-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
}
.logo {
margin-bottom: 20px;
color: #e09f3e;
}
.logo i {
font-size: 80px;
}
h2 {
margin-bottom: 20px;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #333;
}
.input-group {
position: relative;
margin-bottom: 30px;
}
.input-group input {
width: 100%;
padding: 15px;
background: rgba(240, 240, 240, 0.8);
border: 2px solid #e09f3e;
color: #333;
font-size: 16px;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.input-group input:focus {
background-color: rgba(240, 240, 240, 1);
border-color: #ff6f61;
}
.input-group label {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
font-size: 16px;
transition: 0.3s ease;
pointer-events: none;
color: #666;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #e09f3e;
}
button {
width: 100%;
padding: 15px;
background: linear-gradient(90deg, #e09f3e, #ff6f61);
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(90deg, #ff6f61, #e09f3e);
}
.signup-link {
margin-top: 20px;
font-size: 14px;
}
.signup-link a {
color: #e09f3e;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #ff6f61;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<div class="logo">
<i class="fas fa-user-circle"></i>
</div>
<form class="login-form">
<h2>Login</h2>
<div class="input-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email</label>
</div>
<div class="input-group">
<input type="password" id="password" name="password" required placeholder=" ">
<label for="password">Password</label>
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
</html>
Business Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Gradient Background Login</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #4ecca3, #1f8ef1);
color: #333;
position: relative;
}
.login-container {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 40px 30px;
width: 100%;
max-width: 400px;
text-align: center;
}
.website-name {
margin-bottom: 20px;
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #4ecca3, #1f8ef1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
letter-spacing: 4px;
font-family: 'Arial', sans-serif;
}
h2 {
margin-bottom: 30px;
font-size: 2rem;
font-weight: 700;
color: #1f8ef1;
text-transform: uppercase;
letter-spacing: 1px;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #1f8ef1;
font-size: 20px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 50px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid #1f8ef1;
border-radius: 8px;
color: #333;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input::placeholder {
color: rgba(51, 51, 51, 0.5);
}
button {
width: 100%;
padding: 15px;
background: #1f8ef1;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
transition: background 0.3s ease;
}
button:hover {
background: #1a7bc4;
}
.signup-link {
margin-top: 20px;
font-size: 14px;
color: #333;
}
.signup-link a {
color: #1f8ef1;
text-decoration: none;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #1a7bc4;
}
.decorative-line {
margin: 20px 0;
height: 2px;
background: linear-gradient(to right, #4ecca3, #1f8ef1);
border-radius: 5px;
}
.social-icons {
margin-top: 15px;
}
.social-icons i {
color: #1f8ef1;
margin: 0 10px;
font-size: 20px;
transition: color 0.3s ease;
}
.social-icons i:hover {
color: #1a7bc4;
}
</style>
</head>
<body>
<div class="login-container">
<div class="website-name">Decode Fix</div>
<h2>Login</h2>
<div class="decorative-line"></div>
<form class="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" required placeholder="Username">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" required placeholder="Password">
</div>
<button type="submit">Login</button>
<p class="signup-link">Don't have an account? <a href="#">Sign Up</a></p>
<div class="decorative-line"></div>
<div class="social-icons">
<i class="fab fa-facebook-square"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-twitter-square"></i>
</div>
</form>
</div>
</body>
</html>
Need a custom design for your website? Contact us today to bring your idea to life!
After creating a Login Page, the next step is to create an About Us page see our step-by-step guide on the About Us page.
Comment below to let us know which design you love or if there’s a specific design you’d like to see added to the list!
