Blog

Neomorphic Form Using HTML And CSS

Neomorphic Form Using HTML And CSS

Welcome to Code With Random blog. In this blog, we learn how to create a  Neomorphic Form. We use HTML & CSS  for  Neomorphic Form. Hope you enjoy our blog so let’s start with a basic HTML structure for the  Neomorphic 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.

Here we’ll gonna create a Neomorphic Form Using HTML And CSS . so you just simply copy and paste this code into your project.

Neomorphic Form Using HTML And CSS

 

 

HTML Code For Neomorphic 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.

Output

CSS code

@import url(https://unpkg.com/ionicons@4.5.10-0/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 CSS.

Final Output

 

50+ Html , Css &Javascript Projects With Source Code

Now we have completed our CSS section,  Here is our updated output with CSS. Hope you like the Neomorphic Form, 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 Neomorphic 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