Create a Neumorphism Sign In UI by using HTML and CSS

Hello Viewers, welcome to my other blog. In this blog, I'm going to create a Neumorphism Sign In UI by using HTMLand CSS. Earlier I have shared the Create Covid website using HTML and CSS and now this time I will Neumorphism Sign in page.

These projects are used for Polytechnic diploma and other engineering students like B.E., B-tech, M.E., M-tech to complete their microprojects and other developers to create something new.

A Sing In UI is a page that A Sign In page is a web page or an entry page to a website that requires user identification and authentication, regularly performed by entering a username and password combination. Logging in not only provides site access for the user, but also allows the website to track user actions and behavior. ... content. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.

In this program [Neumorphism Sign InUI Design], there is a Sign In page with a neomorphic effect. This page contains a Username, password and Save password Properties.

How to Create Neumorphism Sign IN UI

To create this program (Neumorphism Sign In UI). First, you need to create two Files one HTML File and another one is CSS File.
Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
At the End of the Blog I will provide HTML and CSS source code.

You might like this:

Neumorphism Sign In UI by using HTML and CSS | Free Source Code

To copy-paste the given codes of this Profile card design, first of all, you need to create three files, one is an HTML and CSS file. You can also download all source code files from the given download button.

Document

HTML CODE:

                <!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="radio" 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="#">Sign Up </a>
                            </div>
                        </form>
                    </div>
                </body>
                
                </html>

CSS CODE:

                @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;
                }

DEMO Download

DEMO

Create a Neumorphism Sign In UI by using HTML and CSS

Neumorphism Sign In UI by using HTML and CSS | Free Source Code

Post a Comment

Contact Form