Skip to content
Related Articles

Related Articles

Improve Article
HTML Neumorphism Login Form
  • Difficulty Level : Expert
  • Last Updated : 07 Aug, 2020

Neumorphism combines developments of flat design and skeuomorphism. Neumorphism, or soft UI, is a visual style that combines background colors, shapes, gradients, highlights, and shadows to ensure graphic intense buttons and switches. All that allows achieving a soft, extruded plastic look, and almost 3D styling.

For better understanding visit: https://www.geeksforgeeks.org/html-responsive-modal-login-form/

Follow the code to create a Neumorphism Signin form using CSS:




<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible"
              content="IE=edge" />
        <title>GFG Neumorphism Signin</title>
        <meta name="description"
              content="" />
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1" />
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
                /*Display width and height*/
                height: 100vh;
                width: 100vw;
                overflow: hidden;
                font-family: "Lato", sans-serif;
                font-weight: 700;
                /* To make all the elements center */
                display: flex;
                align-items: center;
                justify-content: center;
                /*Font color and background Color*/
                color: #555;
                background: #ecf0f3;
            }
            .gfg-div {
                /* Login Card Width and height */
                width: 430px;
                height: 500px;
                /* padding */
                padding: 20px 35px 15px 35px;
                border-radius: 35px;
                background: #ecf0f3;
                /* Box-shadow for 3d visualization*/
                box-shadow: 
                  -6px -6px 6px rgba(255, 255, 255, 0.8),
                  6px 6px 6px rgba(0, 0, 0, 0.2);
            }
            .gfg-logo {
                background: url("gfg-logo.png");
                background-size: cover;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin: 0 auto;
                /* Box-shadow for logo */
                box-shadow: 0px 0px 2px #5f5f5f,
                  0px 0px 0px 5px #ecf0f3,
                  8px 8px 15px #a7aaaf,
                  -8px -8px 15px #ffffff;
            }
            .gfg-title {
                text-align: center;
                font-size: 28px;
                padding-top: 24px;
                letter-spacing: 0.5px;
                color: #5ed887;
            }
            .gfg-sub-title {
                text-align: center;
                font-size: 15px;
                padding-top: 7px;
                letter-spacing: 3px;
                color: #5eaa77;
            }
            .gfg-input-fields {
                width: 100%;
                padding: 20px 5px 10px 5px;
            }
            .gfg-input-fields input {
/* To hide default browser optios of input field */
                border: none;
                outline: none;
                /* Custom design for the input field */
                background: none;
                font-size: 18px;
                color: #555;
                padding: 15px 10px 15px 5px;
            }
            .gfg-email,
            .gfg-password {
                margin-bottom: 20px;
                border-radius: 20px;
                /* Box-shadow for 3d */
                box-shadow: inset 5px 5px 5px #cbced1,
                  inset -5px -5px 5px #ffffff;
            }
            .gfg-input-fields svg {
                height: 22px;
                margin: 0 10px -3px 25px;
            }
            .gfg-button {
       /* To hide default browser optios of input field */
                outline: none;
                border: none;
                /* Custom design for the Button */
                cursor: pointer;
                width: 100%;
                height: 60px;
                border-radius: 25px;
                font-size: 20px;
                font-weight: 700;
                font-family: "Lato", sans-serif;
                color: #fff;
                text-align: center;
                background: #67d18a;
                box-shadow: 7px 7px 8px #cbced1,
                  -7px -7px 8px #ffffff;
                transition: 0.5s;
            }
            .gfg-button:hover {
                background: #5fb87d;
            }
            .gfg-button:active {
                background: #4a9764;
            }
            .gfg-link {
                padding-top: 20px;
                text-align: center;
            }
            .gfg-link a {
                text-decoration: none;
                color: #aaa;
                font-size: 15px;
                transition: 0.5s;
            }
            .gfg-link a:hover {
                text-decoration: none;
                color: #67d18a;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="gfg-div">
            <div class="gfg-logo"></div>
            <div class="gfg-title">Geeksforgeeks</div>
            <div class="gfg-sub-title">
              Neumorphism Login Form
          </div>
            <div class="gfg-input-fields">
                <div class="gfg-email">
                    <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="email"
                           placeholder="email" />
                </div>
                <div class="gfg-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" 
                           placeholder="password" />
                </div>
            </div>
            <button class="gfg-button">
              Geeksforgeeks Signin</button>
            <div class="gfg-link"><a href="#">
              Forgot password?</a> or 
              <a href="#">Signup</a></div>
        </div>
    </body>
</html>

Output:

Neomorphism Signin Form




My Personal Notes arrow_drop_up
Recommended Articles
Page :