DEV Community

loading...
Cover image for Neumorphism Login Form UI Design using HTML & CSS

Neumorphism Login Form UI Design using HTML & CSS

backlinkn profile image backlinkn Updated on ・4 min read

In this article, I will tell you how to easily create a Neumorphism login form using HTML and CSS programming code. Earlier I have shown the design of many types of login forms such as animated, pop-up, responsive, transparent, etc. But it is a modern and UI Design login form that everyone is currently liking. This type of form is basically designed by CSS code. It has two themes, the first is the dark theme, the second is the light theme.

Here basically I showed the Light Neumorphism login form design. In this case, a shadow has been created on a white page using CSS code. That shadow is arranged in the form of a login form. Here the color of the shadow has been blackened so that it can be clearly seen on a white background. Like the general form, there are all sorts of options like email id and password input, below there is a login button to log in.

Alt Text




Some Information about this Neumorphism login form

  • It is built using only HTML and CSS programming code. While trying to make it, I tried to write the code as simple as possible.
  • It is basically a Neumorphism login form that combines all the features of a normal login form.
  • Here you will find a place to input email and password to log in. Below is the login button.
  • There is also the location of the forgotten password to forget the password.
  • Every effort has been made to make it responsive and professional. As a result, it works properly on any device.

All in all, it is a professional and responsive login form. Hope you like it.
I have given above the HTML and CSS code required to make it. You can copy those codes and add them to your project or add them to your own website.

How To Make This Neumorphism Login Form

Before creating this Neumorphism form you need to create an HTML file. Then copy the structure given below and add it to the HTML file.

<html>
<head>
     <style>
        Add CSS Code
     </style>

</head>
<body>
       Add Html Code
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

In that structure, I have given complete information on how you can add HTML and CSS code to your file.
Copy or download the following HTML codes from the place where the add HTML code is written above. Add the following CSS code in the place where add CSS code is written. Below I have basically shown step by step which code I have used for which work.

Make Neumorphism Body

The following codes have basically helped to form the body of this login form. Own code is CSS programming code. With which this Neumorphism form has been designed.

<div class="content">

      <div class="text">Login Form</div>
</div>
</div>
Enter fullscreen mode Exit fullscreen mode
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

html,body{
  height: 100%;
}

body{
  display: grid;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}

.content{
  width: 330px;
  background: #dde1e7;
  border-radius: 10px;
  padding: 40px 30px;
  box-shadow: -3px -3px 7px #ffffff73,
              2px 2px 5px rgba(94, 104, 121, 0.288);
}

.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #000;
}

Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Email Holder

I have used the following HTML and CSS code to create the option to add the email id in the form shown in the demo.

<div class="field">
          <span class="fas fa-user"></span>
          <input type="text" required>
          <label>Email or Phone</label>
        </div>
Enter fullscreen mode Exit fullscreen mode
.content .field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  font-size: 18px;
  outline: none;
  border: none;
  color: #595959;
  background: #dde1e7;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

.field input:focus ~ label{
  box-shadow: inset 2px 2px 5px #babecc,
              inset -1px -1px 2px #ffffff73;
}

Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Password Holder

I have used the following code to make a place to input the password shown in the demo. Those have been used in all the work of adding and designing passwords.

<div class="field">
          <span class="fas fa-lock"></span>
          <input type="password">
          <label>Password</label>
        </div>
Enter fullscreen mode Exit fullscreen mode
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}

.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}

.forgot-pass:hover a{
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add Login Button

The following programming codes have helped to create the buttons and forget password options in the form shown above.

<div class="forgot-pass"><a href="#">Forgot Password?</a></div>
        <button>Sign in</button>
        <div class="signup">Not a member?
          <a href="#">signup now</a>
        </div>
Enter fullscreen mode Exit fullscreen mode
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  background: #dde1e7;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 25px;
  box-shadow: 2px 2px 5px #babecc,
              -5px -5px 10px #ffffff73;
}

button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

.signup{
  font-size: 16px;
  color: #595959;
  margin: 10px 0;
}

.signup a{
  color: #000;
  text-decoration: none;
}

.signup a:hover{
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

With these four methods, I have designed this Neumorphism login form. Hope you learned the making of this UI Design form from this article. Click the demo button above to get more guidelines. There I have shared tutorials on creating all kinds of login forms. You can download the code required to make it from above. Hope you like this form and have learned it.

                If you like it, you must like this article
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
craigallen profile image
Craig Allen

This looks really cool!

Collapse
backlinkn profile image
backlinkn Author

Thanks
Craig Allen for liking this login form and for encouraging me with your feedback

Collapse
point_android profile image
Android point

That's nice

Collapse
backlinkn profile image
backlinkn Author

Thanks for liking this login form

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Hey! That is really awesome! I loved the design!

Collapse
backlinkn profile image
backlinkn Author

Thank you Nikhil M Warrier for your feedback

Collapse
alifarhad profile image
Farhad Ali

THAT looks sick

Collapse
backlinkn profile image
backlinkn Author

thank you Farhad Ali

Collapse
jogwums profile image
Jonathan Ogwumike

Really cool design. What happens when you write into the input boxes? The labels don't disappear and they cover the text written.

Can you suggest a solution to that ?

Collapse
backlinkn profile image
backlinkn Author

I would request you to watch the demo once. Of course
Levels will be hidden when you input email and password

Collapse
sagdish profile image
Sagdi Formanov

This is amazing! I'll definitely implement this. Bookmarked

Collapse
backlinkn profile image
backlinkn Author

wow, thank you Sagdi Formanov 😍

Collapse
ben profile image
Ben Halpern

Great tutorial

Collapse
backlinkn profile image
backlinkn Author

Thanks,
Ben Halpern for your feedback

Collapse
numismath3 profile image
Makgabo

Awesome, gonna give it a try.

Collapse
backlinkn profile image
backlinkn Author

thank you so much makgabo for your feedback

Collapse
ikurosaki profile image
ikurosaki

Están excelentes Bro te ganaste un seguidor más. Saludos

Collapse
backlinkn profile image
backlinkn Author

thank you so much for your feedback

Collapse
shimphillip profile image
Phillip Shim

Nice! I have been thinking about creating a neumorphism UI library. This sparks my interests more

Collapse
backlinkn profile image
backlinkn Author

Thanks, Phillip Shim for giving such nice feedback

Collapse
ghcassell profile image
ghcassell

It does look nice. But would there be accessibility implications?

Collapse
backlinkn profile image
backlinkn Author

Of course, you can watch the live demo for more information