
Neumorphic design has taken the web design world by storm with its elegant, soft, and subtle effect. In this blog, we will discuss how to create a Neumorphic login form design with an example.
What is Neumorphic Design?
Neumorphic design is a user interface design trend that creates a soft and subtle look that resembles a physical object’s surface. It gives the user interface a tactile feel and makes it look like it’s popping out of the screen.
How to Create a Neumorphic Login Form Design?
Creating a Neumorphic login form design is easy. You need to follow the below steps:
- HTML Code: Create a login form using Input text for email and password, use a login button, signup and forget password links. Here is the HTML code for the login form:
- CSS Code: Use CSS to create the Neumorphic effect. Here is the CSS code for the login form:
The above CSS code creates a beautiful Neumorphic login form design with a round logo, a title, a login title, email and password input fields, a login button, and forget password and sign up links.
Example of Neumorphic Login Form Design:
Check out the below image for the example of a Neumorphic login form design that we have created using the above HTML and CSS code:
Below is HTML file Code.
<div class="login-container">
<div class="round-logo"></div>
<div class="title"> ACode </div>
<div class="login-title"> User Login </div>
<div class="form-container">
<div class="email">
<input type="email" name="email-input" placeholder="Email Id" />
</div>
<div class="password">
<input type="password" name="password-input" placeholder="password" />
</div>
<button class="login-btn"> Login </button>
<div class="other-links">
<a href="#">Forgot Password ?</a>
<span> OR </span>
<a href="#">Sign Up</a>
</div>
</div>
</div>
CSS Code
Below is CSS file Code.
.login-container {
width: 440px;
height: 600px;
box-shadow: rgb(213, 210, 208) 5px 5px 15px,
rgb(255, 255, 255) -5px -5px 15px;
border-radius: 50px;
padding: 30px 15px;
margin: 50px auto;
font-family: 'Roboto', sans-serif;
}
.round-logo {
width: 100px;
height: 100px;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
box-shadow:
/*logo shadow*/
0px 0px 2px #ccc,
/*bottom right*/
8px 8px 15px #aaa,
/*top left*/
-8px -8px 15px #fff;
}
.title {
text-align: center;
font-size: 20px;
padding: 28px;
letter-spacing: 2px;
color: #333;
}
.login-title {
font-size: 20px;
color: #aaa;
text-align: center;
}
.form-container {
width: 100%;
padding: 35px 5px 35px 5px;
}
.form-container input {
border:none;
outline: none;
background: none;
font-size: 20px;
padding: 20px 5px;
}
.email, .password {
box-shadow: inset 10px 10px 20px #ccc,
inset -10px -10px 10px #fff;
margin-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
border-radius: 25px;
}
.login-btn {
outline: none;
border: none;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: 700;
background-color: #373f57;
color: #fff;
border-radius: 25px;
box-shadow: 2px 2px 4px #bbb,
-3px 3px 8px #fff;
cursor: pointer;
transition: 0.5s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #66749e;
}
.other-links {
padding-top: 20px;
text-align: center;
}
.other-links a {
text-decoration: none;
color: #aaa;
font-size: 16px;
}
.other-links span {
color: #333;
}
Creating a Neumorphic login form design is easy with HTML and CSS. The above code will help you create a beautiful Neumorphic login form design that will enhance your website’s user interface. Use this code as a starting point and customize it according to your website’s design and branding to make it more unique and engaging for your users.
Search Your Keywords
Recent Post
- Boost Your Web Design Skills: 10 CSS Tricks That Will Blow Your Mind!10 Mind-Blowing Tricks to Elevate Your Web Design Skills As a […]
- Creating Engaging Web Animations with HTML and CSS: A Simple Snake Animation ExampleAdding animations to a web page is a fantastic way to […]
- Center a div like a Pro: 4 Essential Techniques You Must Master in CSSAre you looking to center a div on your webpage and […]
- Neumorphic Design: Revolutionize Your Login Experience with Cutting-Edge TechniquesNeumorphic design has taken the web design world by storm with […]
- Neumorphic Card Design: An Elegant UI SolutionDiscover the Power of Neumorphic Card Design for Your UI If […]