This login form uses soft inset and raised surfaces to create a Neumorphism appearance while keeping inputs readable and compact.
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphism Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<div class="login-card">
<div class="login-header">
<div class="neu-icon">
<div class="icon-inner">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
</div>
<h2>Welcome back</h2>
<p>Please sign in to continue</p>
</div>
<form class="login-form" id="loginForm" novalidate>
<div class="form-group">
<div class="input-group neu-input">
<input type="email" id="email" name="email" required autocomplete="email" placeholder=" ">
<label for="email">Email address</label>
<div class="input-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
</div>
</div>
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<div class="input-group neu-input password-group">
<input type="password" id="password" name="password" required autocomplete="current-password" placeholder=" ">
<label for="password">Password</label>
<div class="input-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0110 0v4"/>
</svg>
</div>
<button type="button" class="password-toggle neu-toggle" id="passwordToggle" aria-label="Toggle password visibility">
<svg class="eye-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
<svg class="eye-closed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
<line x1="1" y1="1" x2="23" y2="23"/>
</svg>
</button>
</div>
<span class="error-message" id="passwordError"></span>
</div>
<div class="form-options">
<div class="remember-wrapper">
<input type="checkbox" id="remember" name="remember">
<label for="remember" class="checkbox-label">
<div class="neu-checkbox">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
</div>
Remember me
</label>
</div>
<a href="#" class="forgot-link">Forgot password?</a>
</div>
<button type="submit" class="neu-button login-btn">
<span class="btn-text">Sign In</span>
<div class="btn-loader">
<div class="neu-spinner"></div>
</div>
</button>
</form>
<div class="divider">
<div class="divider-line"></div>
<span>or continue with</span>
<div class="divider-line"></div>
</div>
<div class="social-login">
<button type="button" class="social-btn neu-social">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
</button>
<button type="button" class="social-btn neu-social">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</button>
<button type="button" class="social-btn neu-social">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
</button>
</div>
<div class="signup-link">
<p>Don't have an account? <a href="#">Sign up</a></p>
</div>
<div class="success-message" id="successMessage">
<div class="success-icon neu-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
</div>
<h3>Success!</h3>
<p>Redirecting to your dashboard...</p>
</div>
</div>
</div>
<script src="../../shared/js/form-utils.js"></script>
<script src="script.js"></script>
</body>CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #e0e5ec;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
line-height: 1.6;
}
.login-container {
width: 100%;
max-width: 420px;
}
.login-card {
background: #e0e5ec;
border-radius: 30px;
padding: 50px 40px;
box-shadow:
20px 20px 60px #bec3cf,
-20px -20px 60px #ffffff;
position: relative;
transition: all 0.3s ease;
}
.login-card:hover {
transform: translateY(-5px);
}
.login-header {
text-align: center;
margin-bottom: 40px;
}
.neu-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: #e0e5ec;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
8px 8px 20px #bec3cf,
-8px -8px 20px #ffffff,
inset 0 0 0 #bec3cf,
inset 0 0 0 #ffffff;
transition: all 0.3s ease;
}
.neu-icon:hover {
box-shadow:
4px 4px 10px #bec3cf,
-4px -4px 10px #ffffff,
inset 4px 4px 10px #bec3cf,
inset -4px -4px 10px #ffffff;
}
.icon-inner {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #6c7293;
}
.icon-inner svg {
width: 100%;
height: 100%;
}
.login-header h2 {
color: #3d4468;
font-size: 2rem;
font-weight: 600;
margin-bottom: 8px;
}
.login-header p {
color: #9499b7;
font-size: 15px;
font-weight: 400;
}
.form-group {
margin-bottom: 28px;
position: relative;
}
.neu-input {
position: relative;
background: #e0e5ec;
border-radius: 15px;
box-shadow:
inset 8px 8px 16px #bec3cf,
inset -8px -8px 16px #ffffff;
transition: all 0.3s ease;
}
.neu-input:focus-within {
box-shadow:
inset 4px 4px 8px #bec3cf,
inset -4px -4px 8px #ffffff;
}
.neu-input input {
width: 100%;
background: transparent;
border: none;
padding: 20px 24px;
padding-left: 55px;
color: #3d4468;
font-size: 16px;
font-weight: 500;
outline: none;
transition: all 0.3s ease;
}
.neu-input input::placeholder {
color: transparent;
}
.neu-input label {
position: absolute;
left: 55px;
top: 50%;
transform: translateY(-50%);
color: #9499b7;
font-size: 16px;
font-weight: 400;
pointer-events: none;
transition: all 0.3s ease;
}
.neu-input input:focus + label,
.neu-input input:not(:placeholder-shown) + label {
top: 8px;
font-size: 12px;
color: #6c7293;
transform: translateY(0);
}
.input-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #9499b7;
transition: all 0.3s ease;
}
.input-icon svg {
width: 100%;
height: 100%;
}
.neu-input:focus-within .input-icon {
color: #6c7293;
}
.password-group {
padding-right: 50px;
}
.neu-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: #e0e5ec;
border: none;
width: 35px;
height: 35px;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #9499b7;
box-shadow:
4px 4px 10px #bec3cf,
-4px -4px 10px #ffffff;
transition: all 0.3s ease;
}
.neu-toggle:hover {
color: #6c7293;
}
.neu-toggle:active {
box-shadow:
inset 2px 2px 5px #bec3cf,
inset -2px -2px 5px #ffffff;
}
.neu-toggle svg {
width: 18px;
height: 18px;
}
.eye-closed {
display: none;
}
.neu-toggle.show-password .eye-open {
display: none;
}
.neu-toggle.show-password .eye-closed {
display: block;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 35px;
flex-wrap: wrap;
gap: 16px;
}
.remember-wrapper {
display: flex;
align-items: center;
cursor: pointer;
}
.remember-wrapper input[type="checkbox"] {
display: none;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
color: #6c7293;
font-size: 14px;
font-weight: 500;
}
.neu-checkbox {
width: 22px;
height: 22px;
background: #e0e5ec;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
3px 3px 8px #bec3cf,
-3px -3px 8px #ffffff;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.remember-wrapper input[type="checkbox"]:checked + .checkbox-label .neu-checkbox {
box-shadow:
inset 2px 2px 5px #bec3cf,
inset -2px -2px 5px #ffffff;
}
.neu-checkbox svg {
width: 14px;
height: 14px;
color: #00c896;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
}
.remember-wrapper input[type="checkbox"]:checked + .checkbox-label .neu-checkbox svg {
opacity: 1;
transform: scale(1);
}
.forgot-link {
color: #6c7293;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
}
.forgot-link:hover {
color: #3d4468;
}
.neu-button {
width: 100%;
background: #e0e5ec;
border: none;
border-radius: 15px;
padding: 18px 32px;
color: #3d4468;
font-size: 16px;
font-weight: 600;
cursor: pointer;
position: relative;
margin-bottom: 30px;
box-shadow:
8px 8px 20px #bec3cf,
-8px -8px 20px #ffffff;
transition: all 0.3s ease;
overflow: hidden;
}
.neu-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.neu-button:hover {
transform: translateY(-2px);
box-shadow:
12px 12px 30px #bec3cf,
-12px -12px 30px #ffffff;
}
.neu-button:hover::before {
left: 100%;
}
.neu-button:active {
transform: translateY(0);
box-shadow:
inset 4px 4px 10px #bec3cf,
inset -4px -4px 10px #ffffff;
}
.btn-text {
position: relative;
z-index: 1;
transition: opacity 0.3s ease;
}
.btn-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.neu-spinner {
width: 20px;
height: 20px;
border: 3px solid #bec3cf;
border-top: 3px solid #6c7293;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.neu-button.loading .btn-text {
opacity: 0;
}
.neu-button.loading .btn-loader {
opacity: 1;
}
.divider {
display: flex;
align-items: center;
margin: 30px 0;
gap: 16px;
}
.divider-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, #bec3cf, transparent);
}
.divider span {
color: #9499b7;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-login {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 30px;
}
.neu-social {
width: 50px;
height: 50px;
background: #e0e5ec;
border: none;
border-radius: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #6c7293;
box-shadow:
6px 6px 15px #bec3cf,
-6px -6px 15px #ffffff;
transition: all 0.3s ease;
}
.neu-social:hover {
transform: translateY(-2px);
box-shadow:
8px 8px 20px #bec3cf,
-8px -8px 20px #ffffff;
}
.neu-social:active {
transform: translateY(0);
box-shadow:
inset 3px 3px 8px #bec3cf,
inset -3px -3px 8px #ffffff;
}
.neu-social svg {
width: 22px;
height: 22px;
}
.signup-link {
text-align: center;
}
.signup-link p {
color: #9499b7;
font-size: 14px;
}
.signup-link a {
color: #6c7293;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #3d4468;
}
.error-message {
color: #ff3b5c;
font-size: 12px;
font-weight: 500;
margin-top: 8px;
margin-left: 20px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.error-message.show {
opacity: 1;
transform: translateY(0);
}
.form-group.error .neu-input {
box-shadow:
inset 8px 8px 16px #ffb8c4,
inset -8px -8px 16px #ffffff,
0 0 0 2px #ff3b5c;
}
.success-message {
display: none;
text-align: center;
padding: 40px 20px;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.success-message.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.success-message .neu-icon {
background: #e0e5ec;
color: #00c896;
margin-bottom: 20px;
}
.success-message h3 {
color: #3d4468;
font-size: 1.5rem;
margin-bottom: 8px;
}
.success-message p {
color: #9499b7;
font-size: 14px;
}
@media (max-width: 480px) {
body {
padding: 16px;
}
.login-card {
padding: 35px 25px;
border-radius: 20px;
}
.login-header h2 {
font-size: 1.75rem;
}
.neu-input input {
padding: 18px 20px;
padding-left: 50px;
}
.neu-input label {
left: 50px;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}Notes
- Soft raised + inset shadows define Neumorphism
- Compact layout for component previews
- No dark surfaces to avoid contrast loss
- Button press uses inset state
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.