Beautiful LogIn Form - Neuromorphic Design

In this tutorial, we are going to show how to design a beautiful neuromorphic login form design. In the previous tutorial, we have discussed social icon design you can check from here.

Index.html

  <html>

  <head>

  <meta charset="UTF-8" />

  <link href="
  https://fonts.googleapis.com/
  css2?family=Lato:400,700&display=swap" 
  rel="stylesheet">
  <link rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/
  ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    * {

      box-sizing: content-box;

    }

    body {

      margin: 0;

      height: 100%;

      width: 100%;

      overflow: hidden;

      font-family: 'Montserrat', sans-serif;

      font-weight: 700;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #555;

      background: #ecf0f3;

    }

    .form-wrapper {

      width: 320px;

      height: 430px;

      padding: 30px 17px 17px 17px;

      border-radius: 40px;

      background: #ecf0f3;

      box-shadow: 13px 13px 20px #cbced1,

        -13px -13px 20px #ffffff;

    }

    .user-photo {
      width: 81px;

      height: 81px;

      border-radius: 50%;
      background: #a146f6;

      margin: 0 auto;

      box-shadow:

        0px 0px 2px #5f5f5f,

        0px 0px 0px 5px #ecf0f3,

        8px 8px 15px #a7aaaf,

        -8px -8px 15px #ffffff;

    }


    .user-photo i {
      font-size: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1.3;
      color: #ffffff;
    }

    .heading {

      text-align: center;

      font-size: 21px;

      padding-top: 23px;

      letter-spacing: 0.6px;

    }

    .sm-text {

      text-align: center;

      font-size: 10px;

      padding-top: 6px;

      letter-spacing: 3.1px;

    }

    .input-text {

      width: 99%;

      padding: 30px 5.1px 5.1px 5.1px;

    }

    .input-text input {

      border: none;

      outline: none;

      background: none;

      font-size: 12px;

      color: #555;

      padding: 15px 5px 10px 2px;

    }

    .username,
    .password {
      margin-bottom: 25px;
      border-radius: 25px;
      box-shadow: inset 8px 8px 8px #cbced1,
        inset -8px -8px 8px #ffffff;
    }

    .input-text svg {

      height: 25px;

      margin: 0 10px -3px 25px;

    }

    .sign-btn {

      outline: none;

      border: none;

      cursor: pointer;

      width: 99.9%;

      height: 40px;

      border-radius: 29.9px;

      font-size: 15px;

      font-weight: 699.9;

      font-family: monospace;

      color: #fff;

      text-align: center;

      background: #a146f6;

      box-shadow: 3px 3px 8px #b1b1b1,

        -3px -3px 8px #ffffff;

      transition: 0.5s;

    }

    .sign-btn:hover {

      background: #7b0ce4;

    }

    .sign-btn:active {

      background: #7b0ce4;

    }

    .link {

      padding-top: 30px;

      text-align: center;

    }

    .link a {
      color: #818af8;
      font-size: 15px;
      font-weight: 500;

    }
  </style>
  </head>

  <body>

  <div class="form-wrapper">

    <div class="user-photo">
      <i class="fa fa-user"></i>
    </div>

    <div class="heading">Login Form</div>


    <div class="input-text">

      <div class="username">
        <svg fill="#999" viewBox="0 0 1024 1024">
          <path class="path1"
            d="M896 307.2h-819.2c-42.347 0-76.8 
            34.453-76.8 76.8v460.8c0 42.349 34.453 
            76.8 76.8 76.8h819.2c42.349 0 76.8-34.451
              76.8-76.8v-460.8c0-42.347
              -34.451-76.8-76.8-76.8zM896
              358.4c1.514 0 2.99 0.158
                4.434 0.411l-385.632 
                257.090c-14.862 
                9.907-41.938 
                9.907-56.802 
                0l-385.634-257.090c1.443-0.253 
                2.92-0.411 4.434-0.411h819.2zM896
                870.4h-819.2c-14.115 
                0-25.6-11.485-25.6-25.6v-438.566l378.4
              252.267c15.925 10.618
              36.363 15.925 56.8
                15.925s40.877-5.307
              56.802-15.925l378.398-252.
              267v438.566c0 14.115-11.485
              25.6-25.6 25.6z">
          </path>
        </svg><input type="username" class="user-input" 
    placeholder="username" /></div>

      <div class="password"><svg fill="#999" 
    viewBox="0 0 1024 1024">
          <path class="path1"
            d="M742.4 
            409.6h-25.6v-76.8c0-127.
            043-103.357-230.4-230.4-
            230.4s-230.4 103.357-230
            .4 230.4v76.8h-25.6c-42.
            347 0-76.8 34.453-76.8 
            76.8v409.6c0 42.347 
            34.453 76.8 76.8 
            76.8h512c42.347 0 
            76.8-34.453 76.8-76
            .8v-409.6c0-42.347-34
            .453-76.8-76.8-76.8zM307.
            2 332.8c0-98.811 80.389-179
            .2 179.2-179.2s179.2 80.389
              179.2 179.2v76.8h-358.4v-76
              .8zM768 896c0 14.115-11.485 
              25.6-25.6 25.6h-512c-14.115 
              0-25.6-11.485-25.6-25.6v-409
              .6c0-14.115 11.485-25.6 25.
              6-25.6h512c14.115 0 25.6 
              11.485 25.6 25.6v409.6z">
          </path>
        </svg><input type="password" 
    class="pass-input" placeholder="password" /></div>

    </div>

    <button class="sign-btn">Login</button>

    <div class="link">

      <a href="#">Forgot password?</a> or
     <a href="#">Sign up</a>

    </div>

  </div>



  </body>

  </html>