Login Design Using Neumorphism CSS

Hi, let us create a login design using Neumorphism CSS. It is the latest CSS design and very beautiful, find the expected result image below

Login Design Using Neumorphism CSS

Login Design Using Neumorphism CSS

Kindly find the code below for HTML & CSS

HTML CODE

                    

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title> login Page </title>
  </head>
  <body> 
  <div class="login-div">
    <div class="logo"></div>
    <div class="title">Agba Akin</div>
    <div class="sub-title">Senior Instructor on Twitter!</div>
    <div class="fields">
      <div class="username">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
        </svg>
        <input type="username" class="user-input" placeholder="username">
      </div>
      <div class="password">
        <svg class="svg-icon" viewBox="0 0 20 20">
          <path d="M10,6.978c-1.666,0-3.022,1.356-3.022,3.022S8.334,13.022,10,13.022s3.022-1.356,3.022-3.022S11.666,6.978,10,6.978M10,12.267c-1.25,0-2.267-1.017-2.267-2.267c0-1.25,1.016-2.267,2.267-2.267c1.251,0,2.267,1.016,2.267,2.267C12.267,11.25,11.251,12.267,10,12.267 M18.391,9.733l-1.624-1.639C14.966,6.279,12.563,5.278,10,5.278S5.034,6.279,3.234,8.094L1.609,9.733c-0.146,0.147-0.146,0.386,0,0.533l1.625,1.639c1.8,1.815,4.203,2.816,6.766,2.816s4.966-1.001,6.767-2.816l1.624-1.639C18.536,10.119,18.536,9.881,18.391,9.733 M16.229,11.373c-1.656,1.672-3.868,2.594-6.229,2.594s-4.573-0.922-6.23-2.594L2.41,10l1.36-1.374C5.427,6.955,7.639,6.033,10,6.033s4.573,0.922,6.229,2.593L17.59,10L16.229,11."></path>
        </svg>
        <input type="password" class="pass-input" placeholder="password">
      </div>
      <button class="signing-button">Login</button>
      <div class="link">
        <a href="#">Forgot password?</a> or <a href="#">Sign up</a>
      </div>
    </div>
  </div>
</body>
</html>

CSS CODE

                    

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300;1,700&display=swap');
*{
  box-sizing:border-box;
}
body {
  margin:0;
  height:100vh;
  width:100vw;
  font-family: 'Lato', sans-serif;
  overflow:hidden;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  background:#ecf0f3;
  
}
.login-div {
  width:430px;
  height:600px;
  border-radius:40px;
  padding: 60px 35px 35px 35px;
  background:#ecf0f3;
  box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
}
.logo {
  width:100px;
  height:100px;
  background: url("https://www.seekpng.com/png/detail/47-473775_google-transparent-background-twitter-logo.png");
  border-radius:90%;
  margin:0 auto;
  box-shadow: 0px 0px 2px #5f5f5f, 0px 0px 0px 5px #ecf0f3,
    8px 8px 15px #a7aaaf, -8px -8px 15px #fff;
  
}
.title {
  text-align:center;
  font-size: 28px;
  padding-top:24px;
  letter-spacing:0.5px;
  
}
.sub-title {
  text-align:center;
  font-size:15px;
  padding-top:7px;
  letter-spacing:3px;
}
.fields {
  padding:75px 5px 5px 5px;
  width:100%;
}
.fields input {
  border:none;
  outline:none;
  background:none;
  font-size:18px;
  color:#555;
  padding:20px 10px 20px 5px;
  
}
.username,
.password {
  margin-bottom:30px;
  border-radius:25px;
  box-shadow:inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}
.fields svg {
  height:22px;
  margin:0 10px -3px 25px;
}
.signing-button {
  border:none;
  cursor:pointer;
  outline:none;
  height:60px;
  width:100%;
  font-size:20px;
  border-radius:30px;
  font-weight:700;
  font-family: 'Lato', sans-serif;
  color:#fff;
  text-align:center;
  background:#02db26;
  box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #fff;
  transition: all 0.5s ;
}
.signing-button:hover {
  background-color:#1d6650;
}
.signing-button:active {
  background-color: #7e4833;
}
.link {
  padding-top:20px;
  text-align:center;
}
.link a {
  text-decoration:none;
  color:#aaa;
  font-size:15px;
}

Remember in your vscode and other IDE that

  • You are creating an HTML file and can name that file anything .html
  • Remember that your CSS file must be styles.css

Have good day

 

Leave a Reply

Your email address will not be published. Required fields are marked *