On-screen text
web-leb.com/en/code/1987
Login
Username
Enter your username
Password
Enter your password
LOGIN
Forgot Password?
Sign Up
Animated Neumorphism Login Screen
169
Neumorphism
Open in Editor
Recommended
14 May 2025
Gradient Login Form HTML CSS
9 September 2024
Animated Delete Button
26 February 2024
HTML CSS Login Form
HTML Copy
/* Leave empty if not needed */ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Neumorphism Login</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
/* Base Colors & Variables for Neumorphism */
:root {
--bg-color: #e8e8e8;
--card-color: #f0f0f0;
--text-color: #333;
--button-color: #8a2be2;
--button-text-color: #fff;
--shadow-dark: 10px 10px 20px #c5c5c5, -10px -10px 20px #ffffff;
--shadow-light: inset 5px 5px 10px #c5c5c5, inset -5px -5px 10px #ffffff;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.login-container {
background-color: var(--card-color);
padding: 40px;
border-radius: 20px;
box-shadow: var(--shadow-dark);
text-align: center;
width: 350px;
}
h1 {
color: var(--text-color);
margin-bottom: 30px;
font-weight: 600;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 8px;
color: var(--text-color);
font-weight: 400;
}
.input-group input {
width: calc(100% - 20px);
padding: 15px;
border: none;
border-radius: 10px;
background-color: var(--card-color);
box-shadow: var(--shadow-light);
color: var(--text-color);
font-size: 16px;
outline: none;
}
.input-group input::placeholder {
color: #aaa;
}
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 10px;
background-color: var(--button-color);
color: var(--button-text-color);
font-size: 18px;
font-weight: 600;
cursor: pointer;
box-shadow: var(--shadow-dark);
transition: all 0.3s ease;
}
button:hover {
box-shadow: inset var(--shadow-dark);
}
.options {
margin-top: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
}
.options a {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s ease;
}
.options a:hover {
color: var(--button-color);
}
.options a.signup {
font-weight: 600;
}
</style>
</head>
<body>
<div class="login-container">
<h1>Login</h1>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username">
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password">
</div>
<button>LOGIN</button>
<div class="options">
<a href="#">Forgot Password?</a>
<a href="#" class="signup">Sign Up</a>
</div>
</div>
</body>
</html>
CSS Copy
/* Replace with your CSS Code
(Leave empty if not needed) */
JS Copy
/* Replace with your JS Code
(Leave empty if not needed) */
