HTML Neumorphism Login Form - GeeksforGeeks

04 Dec, 2021
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:
html
<!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 options 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 options 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
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
varshagumber28
CSS-Properties
HTML5
CSS
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?