Neumorphism Login & Signup Form HTML CSS JS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Signup Form | Learn with Arshyan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-box login">
<div class="text">LOGIN</div>
<form>
<div class="field">
<div class="fas fa-envelope"></div>
<input type="email" placeholder="Email" required>
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" class="password" placeholder="Password" required>
<i class="fas fa-eye toggle-password"></i>
</div>
<button type="submit">Login</button>
<div class="social-login facebook">
<i class="fab fa-facebook-f"></i> Login with Facebook
</div>
<div class="social-login google">
<i class="fab fa-google"></i> Login with Google
</div>
<div class="link">
Don’t have an account? <a href="#" class="switch">Sign up</a>
</div>
</form>
</div>
<div class="form-box signup">
<div class="text">SIGNUP</div>
<form>
<div class="field">
<div class="fas fa-envelope"></div>
<input type="email" placeholder="Email" required>
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" class="password" placeholder="Password" required>
<i class="fas fa-eye toggle-password"></i>
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" class="password" placeholder="Confirm Password" required>
<i class="fas fa-eye toggle-password"></i>
</div>
<button type="submit">Sign Up</button>
<div class="social-login facebook">
<i class="fab fa-facebook-f"></i> Sign up with Facebook
</div>
<div class="social-login google">
<i class="fab fa-google"></i> Sign up with Google
</div>
<div class="link">
Already have an account? <a href="#" class="switch">Login</a>
</div>
</form>
</div>
</div>
<template id="orMWQXrrahwar34wU2UZ"></template>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #dde1e7;
user-select: none;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 380px;
}
.form-box {
width: 100%;
background: #dde1e7;
padding: 45px 35px 40px;
box-sizing: border-box;
border-radius: 10px;
box-shadow: -4px -4px 7px #fffdfdb7,
3px 3px 5px rgba(94, 104, 121, 0.288);
display: none;
}
.form-box.active {
display: block;
}
.text {
font-size: 28px;
color: #000;
font-weight: 600;
text-align: center;
letter-spacing: 2px;
}
form {
margin-top: 30px;
}
form .field {
margin-top: 20px;
display: flex;
align-items: center;
position: relative;
}
.field .fas {
height: 50px;
width: 50px;
color: #868686;
font-size: 18px;
line-height: 50px;
text-align: center;
background: #dde1e7;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
border-radius: 5px 0 0 5px;
}
.field input {
height: 50px;
width: 100%;
font-size: 17px;
color: #333;
padding: 0 40px 0 15px;
border: none;
outline: none;
background: #dde1e7;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
border-radius: 0 5px 5px 0;
}
.toggle-password {
position: absolute;
right: 12px;
font-size: 18px;
color: #666;
cursor: pointer;
}
form button {
height: 50px;
width: 100%;
margin-top: 35px;
border-radius: 5px;
border: none;
background: #dde1e7;
font-size: 18px;
font-weight: 600;
cursor: pointer;
box-shadow: -3px -3px 7px #fffdfdb7,
2px 2px 5px rgba(94, 104, 121, 0.288);
}
form button:hover {
color: #0dafbb;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.link {
margin-top: 25px;
text-align: center;
color: #000;
}
.link a {
color: #08adef;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
.social-login {
margin-top: 20px;
padding: 12px;
border-radius: 5px;
text-align: center;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.facebook {
background: #3b5998;
color: #fff;
}
.google {
background: #db4437;
color: #fff;
}
JavaScript
// Default show login
document.querySelector(".login").classList.add("active");
// Toggle Login ↔ Signup
const switches = document.querySelectorAll(".switch");
const loginForm = document.querySelector(".login");
const signupForm = document.querySelector(".signup");
switches.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault();
loginForm.classList.toggle("active");
signupForm.classList.toggle("active");
});
});
// Password show/hide
const toggles = document.querySelectorAll(".toggle-password");
toggles.forEach(toggle => {
toggle.addEventListener("click", () => {
const input = toggle.previousElementSibling;
if (input.type === "password") {
input.type = "text";
toggle.classList.replace("fa-eye", "fa-eye-slash");
} else {
input.type = "password";
toggle.classList.replace("fa-eye-slash", "fa-eye");
}
});
});