Neumorphism Form Using HTML and CSS

Neumorphism Form Using HTML and CSS

Neumorphism Form Using HTML and CSS

Welcome to Code With Random blog. In this blog, we learn how to create a Neumorphism Form. We use HTML and CSS  for Neumorphism Form. Hope you enjoy our blog so let’s start with a basic HTML structure for the Neumorphism Form.

Neumorphism combines developments of flat design and skeuomorphism. Neumorphism, or soft UI, is a visual style that combines background colors, shapes, gradients, highlights, and shadows to ensure graphic intense buttons and switches.

Neumorphism is a style that’s worth exploring. It is sleek and detailed and it is truly interesting to create a design with. It is definitely a breath of fresh air from the flat design and all other styles and trends.  Web Form or HTML form is very flexible and it can have many input fields of different types such as text field, password field, radio button, combo box, etc.

Neumorphism Form Using HTML and CSS
Neumorphism Form Using HTML and CSS

 

HTML Code For Neumorphism Form

<!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" />
<title>Neomorphic Form html css</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<div class="segment">
<h1>Sign up</h1>
</div>
<label>
<input type="text" placeholder="Email Address" />
</label>
<label>
<input type="password" placeholder="Password" />
</label>
<button class="red" type="button">
<i class="icon ion-md-lock"></i> Log in
</button>
<div class="segment">
<button class="unit" type="button">
<i class="icon ion-md-arrow-back"></i>
</button>
<button class="unit" type="button">
<i class="icon ion-md-bookmark"></i>
</button>
<button class="unit" type="button">
<i class="icon ion-md-settings"></i>
</button>
</div>
<div class="input-group">
<label>
<input type="text" placeholder="Email Address" />
</label>
<button class="unit" type="button">
<i class="icon ion-md-search"></i>
</button>
</div>
</form>
</body>
</html>

There is all the HTML code for the Neomorphic Form. Now, you can see output without CSS, then we write CSS for the Neomorphic Form.

10+ HTML CSS Projects For Beginners with Source Code

Output

Neumorphism Form Using HTML and CSS
Neumorphism Form Using HTML and CSS

CSS Code For Neumorphism Form

@import url(https://unpkg.com/[email protected]/dist/css/ionicons.min.css);
body, html {
background-color: #ebecf0;
}
body, p, input, select, textarea, button {
font-family: 'Montserrat', sans-serif;
letter-spacing: -0.2px;
font-size: 16px;
}
div, p {
color: #babecc;
text-shadow: 1px 1px 1px #fff;
}
form {
padding: 16px;
width: 320px;
margin: 0 auto;
}
.segment {
padding: 32px 0;
text-align: center;
}
button, input {
border: 0;
outline: 0;
font-size: 16px;
border-radius: 320px;
padding: 16px;
background-color: #ebecf0;
text-shadow: 1px 1px 0 #fff;
}
label {
display: block;
margin-bottom: 24px;
width: 100%;
}
input {
margin-right: 8px;
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
appearance: none;
-webkit-appearance: none;
}
input:focus {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button {
color: #61677c;
font-weight: bold;
box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
transition: all 0.2s ease-in-out;
cursor: pointer;
font-weight: 600;
}
button:hover {
box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
}
button:active {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button .icon {
margin-right: 8px;
}
button.unit {
border-radius: 8px;
line-height: 0;
width: 48px;
height: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 8px;
font-size: 19.2px;
}
button.unit .icon {
margin-right: 0;
}
button.red {
display: block;
width: 100%;
color: #ae1100;
}
.input-group {
display: flex;
align-items: center;
justify-content: flex-start;
}
.input-group label {
margin: 0;
flex: 1;
}

Now we have completed our CSS section,  Here is our final updated output HTML + CSS.

Restaurant Website Using HTML and CSS

Final Output Of Neumorphism Form Using Html and Css

Neumorphism Form Using HTML and CSS
Neumorphism Form Using HTML and CSS

 

50+ Html , Css &Javascript Projects With Source Code

Now we have completed our CSS section,  Here is our updated output with HTML + CSS. Hope you like the Neumorphism, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

In this post I’ve gathered some examples for creating Neumorphic interface elements using CSS.

In this post, we learn how to create Neumorphism Form Using HTML And CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank you And Happy Learning!!!

Written by – Code With Random/Anki
code by – Swapnil



Leave a Reply