Login Design Using Neumorphism CSS

Reads 5,620

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

Kindly find the code below for HTML & CSS

HTML CODE

Copy 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

Copy 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:#1385be;
  
  
}
.login-div {
  width:430px;
  height:600px;
  border-radius:50px;
  padding: 60px 35px 35px 35px;
 border-radius: 33px;
background: #1385be;
box-shadow:  5px 5px 10px #1071a2,
             -5px -5px 10px #1699db;
}
.logo {
  width:100px;
  height:100px;
  background: url("https://cdn.dribbble.com/users/24078/screenshots/15522433/media/e92e58ec9d338a234945ae3d3ffd5be3.jpg?compress=1&resize=100x120");
  border-radius:90%;
  margin:0 auto;
border-radius: 50%;
box-shadow:  5px 5px 10px #106d9c,
             -5px -5px 10px #169de0;
}

.title {
  text-align:center;
  font-size: 29px;
  padding-top:24px;
  letter-spacing:0.5px;
  color: #fff;
  
}
.sub-title {
  text-align:center;
  font-size:15px;
  padding-top:7px;
  letter-spacing:3px;
  color: #fff;
}
.fields {
  padding:75px 5px 5px 5px;
  width:100%;
  border-radius: 33px;
}
  
.fields input {
  border:none;
  outline:none;
  background:none;
  font-size:18px;
  padding:20px 10px 20px 5px;

  
}
.username,
.password {
  margin-bottom:30px;
  border-radius:25px;
  border-radius: 33px;
background: #1385be;
box-shadow:  5px 5px 10px #1071a2,
             -5px -5px 10px #1699db;
    text-color: #fff;

}
.fields svg {
  height:25px;
  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: linear-gradient(145deg, #7a11ab, #9214cb);

  transition: all 0.5s ;
}
.signing-button:hover {
  background-color:#50e5b9;
}
.signing-button:active {
  background-color: #88ef9e;
}
.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

Avatar photo

Founder & CEO of Swiftspeed Appcreator. I enjoy sharing my experiences in the digital world and helping businesses solve more problems with software development. Connect with me on LinkedIn @ Akinola Abdulakeem and Twitter @Kynsofficial

11 Comments

  1. lemme sharperly run this, boss. ill post it on twitter once im done. more strenght, Baba.

    Reply

  2. More knowledge to your brain boss.
    Don’t understand the ‘path’ part sir

    Reply

  3. Thanks for this boss….Which of Vscode or Dreamweaver is better when designing a website?

    Reply

  4. Thank you for all you do. You have been the inspiration we long searched for

    Reply

  6. Really aesthetic looking, I must say there are some tags I haven’t seen before and those really long strange numbers… But then we must learn it and understand it.

    Reply

  9. Thank you so much leader…

    Reply
  10. Oni Samuel says:

    Good day sir, currently saw your link and really interested in website design.
    Please how cam i get in touch with you.

    Reply

Leave a Reply

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