How to Create a Neumorphism Sign In Form Design in HTML and CSS

Hello Viewers, today's post will teach you how to make a Neumorphism Sign In Form Design in HTML and CSS. I previously published an HTML, CSS and PHP -based Dyanamic PHP Calculator.

The Neumorphism effect is a hybrid of today's popular flat UI and traditional skeuomorphic concepts! The components have a dark box-shadow on the bottom and a bright box-shadow on the top, which when combined, gives the impression that the elements are forcing their way through your display.

This is a Light Neumorphism Sign In Form made entirely of HTML and CSS, as you can see in the image. Basically, there are certain symbols like user and password in our Light Neumorphism Sign In. This Sign In and Sign Up Form was developed only for the sake of design.

If you enjoy this program (Neumorphism Sign In and Sign Up Form UI Design) and would want to obtain the source codes, please contact us. This program's source codes are easily accessible. You may access the source codes by scrolling below.

If you're a novice with only a rudimentary understanding of HTML and CSS, you may easily construct this sort of Sign In and Sign Up form with no function or action.

Sign Up page :-

Sign In page :-

You might like this:

Source Code :-

Document

HTML CODE FOR SIGN IN PAGE:

                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link rel="stylesheet" href="style.css">
                    <title>Sign In</title>
                </head>
                
                <body>
                    <div class="wrapper">
                        <form action="">
                            <div class="head">
                                Sign In
                            </div>
                            <div class="input">
                                <div class="in">
                                    <i class="bi bi-person-circle"></i>
                                    <input type="text" name="" class="box" placeholder="Username" id=" " required>
                                </div>
                
                                <div class="in">
                                    <i class="bi bi-key-fill"></i>
                                    <input type="password" required name="" class="box" placeholder="Password" id="">
                                </div>
                            </div>
                            <div class="remember">
                                <input type="checkbox" name="" id="rem"> Remember the password ?
                            </div>
                            <div class="btn">
                                <input type="submit" class="button" value="Sign In">
                
                            </div>
                            <div class="forgot">
                                <a href="#" class="for">Forgotten password ?</a>
                                <a href="signup.html">Sign Up </a>
                            </div>
                        </form>
                    </div>
                </body>
                
                </html>

CSS CODE FOR SIGN IN PAGE:

                @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
                @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Lato', sans-serif;
                }
                
                body {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #dad2d2;
                }
                
                body .wrapper {
                    width: 300px;
                    padding: 30px;
                    border-radius: 20px;
                    background: #dad2d2;
                    box-shadow: -33px -33px 66px #bbb5b5, 33px 33px 66px #f9efef;
                }
                
                body .wrapper .head {
                    font-size: 40px;
                    font-weight: 800;
                    text-align: center;
                    padding: 10px 0;
                }
                
                body .wrapper .input .in {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    margin: 20px 0;
                    border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff;
                }
                
                body .wrapper .input .in i {
                    font-size: 20px;
                    width: 40px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /*border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff; */
                }
                
                body .wrapper .input .in .box {
                    outline: none;
                    border: none;
                    width: 100%;
                    padding: 10px;
                    background-color: transparent;
                    /* border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff; */
                }
                
                body .wrapper .remember {
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    margin-top: 10px;
                    font-size: 12px;
                }
                
                body .wrapper .remember #rem {
                    margin-right: 5px;
                }
                
                body .wrapper .btn {
                    display: flex;
                    justify-content: center;
                }
                
                body .wrapper .btn .button {
                    cursor: pointer;
                    border: none;
                    outline: none;
                    width: 50px%;
                    padding: 10px 30px;
                    margin: 30px 0;
                    border-radius: 20px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff;
                }
                
                body .wrapper .btn .button:hover {
                    background: #d9d9d9;
                    box-shadow: -5px -5px 10px #c3c3c3, 5px 5px 10px #efefef;
                }
                
                body .wrapper .forgot {
                    font-size: 11px;
                    text-align: center;
                }
                
                body .wrapper .forgot .for {
                    color: black;
                }
                
                body .wrapper .forgot a {
                    text-decoration: none;
                    margin: 0 2px;
                }

Document

HTML CODE FOR SIGN UP PAGE:

                <!DOCTYPE html>
                <html lang="en">
                
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link rel="stylesheet" href="signupstyle.css">
                    <title>Sign Up</title>
                </head>
                
                <body>
                    <div class="wrapper">
                        <form action="">
                            <div class="head">
                                Sign Up
                            </div>
                            <div class="input">
                                <div class="field">
                                    <div class="in">
                                        <i class="bi bi-person-circle"></i>
                                        <input type="text" name="" class="box" placeholder="Full Name" id=" " required>
                                    </div>
                                    <div class="in">
                                        <i class="bi bi-envelope-open-fill"></i>
                                        <input type="email" name="" class="box" placeholder="E-mail Address" id=" " required>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="in">
                                        <i class="bi bi-telephone-fill"></i>
                                        <input type="number" name="" class="box" placeholder="Phone Number" id=" " required>
                                    </div>
                                    <div class="in">
                                        <i class="bi bi-key-fill"></i>
                                        <input type="password" required name="" class="box" placeholder="Password" id="">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="in">
                                        <i class="bi bi-key-fill"></i>
                                        <input type="password" required name="" class="box" placeholder="Conform Password" id="">
                                    </div>
                                </div>
                            </div>
                
                
                            <div class="btn">
                                <input type="submit" class="button" value="Create an account">
                
                            </div>
                            <div class="forgot">
                                <a href="#" class="for">Already have an account ?</a>
                                <a href="index.html">Sign In </a>
                            </div>
                
                            <div class="or">
                                <h3>OR</h3>
                            </div>
                            <div class="login">
                                <div class="log">
                                    <div class="field-btn">
                                        <i class="bi bi-google"></i>
                                        <a href="#">Login to Google</a>
                                    </div>
                                </div>
                                <div class="log">
                                    <div class="field-btn">
                                        <i class="bi bi-facebook"></i>
                                        <a href="#">Login to Facebook</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                
                    </div>
                </body>
                
                </html>

CSS CODE FOR SIGN UP PAGE:

                @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
                @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Lato', sans-serif;
                }
                
                body {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    overflow-y: scroll;
                    align-items: center;
                    background-color: #dad2d2;
                }
                
                body .wrapper {
                    width: 600px;
                    padding: 20px;
                    border-radius: 20px;
                    background: #dad2d2;
                    box-shadow: -33px -33px 66px #bbb5b5, 33px 33px 66px #f9efef;
                }
                
                body .wrapper .head {
                    font-size: 40px;
                    font-weight: 800;
                    text-align: center;
                    padding: 10px 0;
                }
                
                body .wrapper form {
                    display: flex;
                    flex-direction: column;
                }
                
                body .wrapper .field {
                    display: flex;
                    /* flex-direction: column; */
                    margin: 10px 10px;
                }
                
                body .wrapper .result {
                    text-align: center;
                    display: block;
                    padding: 15px 0;
                    color: blue;
                }
                
                body .wrapper .input .in {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    margin: 10px 10px;
                    border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff;
                }
                
                body .wrapper .input .in i {
                    font-size: 20px;
                    width: 40px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /*border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff; */
                }
                
                body .wrapper .input .in .box {
                    outline: none;
                    border: none;
                    width: 100%;
                    height: 40px;
                    padding: 10px;
                    background-color: transparent;
                    /* border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff; */
                }
                
                body .wrapper .remember {
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    margin-top: 10px;
                    font-size: 12px;
                }
                
                body .wrapper .remember #rem {
                    margin-right: 5px;
                }
                
                body .wrapper .btn {
                    display: flex;
                    justify-content: center;
                }
                
                body .wrapper .btn .button {
                    cursor: pointer;
                    border: none;
                    outline: none;
                    width: 50%;
                    padding: 10px 30px;
                    margin: 30px 0;
                    border-radius: 10px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff;
                }
                
                body .wrapper .btn .button:hover {
                    background: #d9d9d9;
                    box-shadow: -5px -5px 10px #c3c3c3, 5px 5px 10px #efefef;
                }
                
                body .wrapper .forgot {
                    font-size: 20px;
                    text-align: center;
                }
                
                body .wrapper .forgot .for {
                    color: black;
                }
                
                body .wrapper .forgot a {
                    text-decoration: none;
                    margin: 0 2px;
                }
                
                .or h3 {
                    text-align: center;
                    margin: 20px 0;
                }
                
                .login {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .login .log {
                    /* text-align: center; */
                    margin: 10px 20px;
                    cursor: pointer;
                    width: 350px;
                    padding: 10px 0;
                    border-radius: 5px;
                    background: #dad2d2;
                    box-shadow: -5px -5px 10px #948f8f, 5px 5px 10px #ffffff;
                    display: grid;
                    place-items: center;
                }
                
                .field-btn {
                    display: inline;
                }
                
                .login .log {
                    transition: all 0.3s ease-in;
                }
                
                .login .log i {
                    padding: 10px 10px;
                }
                
                .login .log:hover {
                    background: #d9d9d9;
                    box-shadow: -5px -5px 10px #c3c3c3, 5px 5px 10px #efefef;
                }
                
                .login .log a {
                    color: black;
                    text-decoration: none;
                }
                
                @media only screen and (max-width:700px) {
                    body .wrapper {
                        width: 80%;
                    }
                    .login {
                        flex-direction: column;
                    }
                    .login .log {
                        width: 80%;
                    }
                    body .wrapper .input .in {
                        height: 40px;
                    }
                    .login .log {
                        height: 35px;
                    }
                }
                
                @media only screen and (max-width:480px) {
                    body .wrapper .field {
                        flex-direction: column;
                    }
                    body .wrapper .forgot {
                        font-size: 15px;
                    }
                }

Download

How to Create a Neumorphism Sign In Form Design in HTML and CSS

Post a Comment

Contact Form