HTML Neumorphism Login Form
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 a better understanding visit: https://www.geeksforgeeks.org/html-responsive-modal-login-form/
Here is the preview image we are going to make:
Neumorphism Login Form Preview
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:
HTML Neumorphism Login Form
Please Login to comment...