Bootstrap Neumorphism Login Form Using HTML and CSS (Free Source Code)
If a website needs a modern minimalistic login form, then consider this Bootstrap Neumorphism Login Form Using HTML and CSS.
A user-friendly interface results from the implementation of soft shadows and clean design through this Bootstrap Neumorphism Login Form Using HTML and CSS. The guide includes a complete breakdown of its features followed by step-by-step instructions for implementing the best practice coded form for time-saving purposes.
As a coding project suitable for beginners and juniors, this form unites Bootstrap’s adaptability with neuromorphic style trends.
GitHub Source: Bootstrap Neumorphism Login Form
Features
- Bootstrap integration: Built using Bootstrap for fast, responsive layouts.
- Neumorphic design: Soft shadows and subtle effects for a modern look.
- Easy customization: Change colors, sizes, or fonts without breaking the layout.
- Mobile-friendly: Works smoothly on all screen sizes.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- Bootstrap (5.3.3)
Recommended for You
- Bootstrap Responsive Filterable Image Gallery
- Responsive Bootstrap Restaurant & Food Delivery Template
- Bootstrap Personal Portfolio Template for Digital Marketer
- Modern Bootstrap Portfolio Template for Material UI Designer
- Ultimate Bootstrap for Responsive Web Design
- Bootstrap Interview Questions
Video Preview
Steps to Build Website Bootstrap Form
Creating this form is simple. Obtain the downloaded HTML and CSS files before pasting their content into your current project.
The stylesheet and components of Bootstrap must be linked through their CDN system. Users should customize form colors and optional Material UI elements based on their requirements. Code beginners require only a few minutes to set up this form operation.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!-- Developed by Shokat Javed at JVCodes.com -->
<head>
<meta charset="utf-8">
<!-- <title>Neumorphism Login Form UI | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="content">
<div class="text">
Login Form
</div>
<form action="#">
<div class="field">
<input type="text" required>
<span class="fas fa-user"></span>
<label>Email or Phone</label>
</div>
<div class="field">
<input type="password" required>
<span class="fas fa-lock"></span>
<label>Password</label>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<button>Sign in</button>
<div class="sign-up">
Not a member?
<a href="#">signup now</a>
</div>
</form>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the bootstrap form:
/* Developed by Shokat Javed at JVCodes.com */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
/* user-select: none; */
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #cce1ff;
text-align: center;
}
.content{
width: 330px;
padding: 40px 30px;
background: #dde1e7;
border-radius: 10px;
box-shadow: -3px -3px 7px #999999b7,
2px 2px 5px rgba(94, 104, 121, 0.767);
}
.content .text{
font-size: 33px;
font-weight: 600;
margin-bottom: 35px;
color: #595959;
}
.field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field:nth-child(2){
margin-top: 20px;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
outline: none;
border: none;
font-size: 18px;
background: #dde1e7;
color: #595959;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #BABECC,
inset -5px -5px 10px #ffffff73;
}
.field input:focus{
box-shadow: inset 1px 1px 2px #BABECC,
inset -1px -1px 2px #ffffff73;
}
.field span{
position: absolute;
color: #595959;
width: 50px;
line-height: 50px;
}
.field label{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 45px;
pointer-events: none;
color: #666666;
}
.field input:valid ~ label{
opacity: 0;
}
.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;
}
button{
margin: 15px 0;
width: 100%;
height: 50px;
font-size: 18px;
line-height: 50px;
font-weight: 600;
background: #dde1e7;
border-radius: 25px;
border: none;
outline: none;
cursor: pointer;
color: #595959;
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;
}
.sign-up{
margin: 10px 0;
color: #595959;
font-size: 16px;
}
.sign-up a{
color: #3498db;
text-decoration: none;
}
.sign-up a:hover{
text-decoration: underline;
}
Download Source Code
The following free source code exists for download without copyright limitations. You can modify this code for both your work and your client projects.
Conclusion
Web developers need the Bootstrap Neumorphism Login Form due to its essential functionality for contemporary websites.
Website modernization becomes instant by using this form because it provides a clean interface alongside easy use with professional appearance capabilities. Your open-source UI component capabilities can be best displayed through the inclusion of this element in your portfolio.
Found this helpful? The web source requires proper attribution by adopting JV source codes. The free library contains additional web components, including forms, cards, and menus for users to explore. Join our YouTube channel to access tutorials. Stuck? Drop a comment—we’ll reply fast!
