<!DOCTYPE html>
<html lang="en">
<head>
  <title>Neumorphism login form Design</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

 <div class="login-page">
 	<form class="form">
 		<h2>Login</h2>
 		<div class="input-group">
 			<input type="text" class="input-control" placeholder="Email">
 		</div>
 		<div class="input-group">
 			<input type="password" class="input-control" placeholder="Password">
 		</div>
 		<button type="submit" class="submit-btn">Log In</button>
 	</form>
 </div>

</body>
</html>

:root{
	--outer-shadow : 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
	--inner-shadow : inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
	--inner-shadow-none : inset 0px 0px 0px #d0d0d0, inset 0px 0px 0px #f8f8f8;
}

body{
	line-height: 1.5;
	font-family: sans-serif;
}
*{
	box-sizing: border-box;
	margin:0;
	outline: none;
}
.login-page{
	background-image: url('https://image.divscode.com/login-bg.jpg');
	background-size: cover;
	min-height: 100vh;
	padding: 100px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-page .form{
	max-width: 350px;
	width: 100%;
	padding: 50px 30px;
	border-radius: 8px;
	box-shadow: var(--outer-shadow);
}
.login-page .form h2{
	font-size: 28px;
	text-align: center;
	text-transform: uppercase;
	margin:0 0 30px;
	color: #888888;
}
.login-page .form .input-group{
	margin-bottom: 30px;
	box-shadow: var(--inner-shadow);
	border-radius: 30px;
	transition: box-shadow 0.3s ease;
	position: relative;
	z-index: 1;
}
.login-page .form .input-group:before{
	content: '';
	position: absolute;
	box-sizing: border-box;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 30px;
	transition: box-shadow 0.3s ease;
}
.login-page .form .input-group:hover:before{
	box-shadow: var(--outer-shadow);
}
.login-page .form .input-group:hover{
	box-shadow: var(--inner-shadow-none);
}
.login-page .form .input-control{
	display: block;
	height: 50px;
	width: 100%;
	font-size: 16px;
	padding: 0 15px;
	border:none;
	border-radius: 30px;
	background-color: transparent;
	color: #000000;
}
.login-page .form .submit-btn{
	height: 50px;
	width: 100%;
	border-radius: 30px;
	font-size: 16px;
	text-transform: capitalize;
	border: none;
	box-shadow: var(--outer-shadow);
	background-color: #2196f3;
	cursor: pointer;
	color: #ffffff;
	transition: all 0.3s ease;
}
.login-page .form .submit-btn:hover{
   background-color: #1278ca;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.