CSS Neomorphism design -easy steps to create

Original Post - Click Here

Hello coders! in this post we will see some steps to create a CSS Neomorphism design very easily. We are going to design a neomorphism login form, that help us to easily understand the concept of Nemorphism design. So let’s see what we are going to create in this post (the snapshot is given above).

Steps to create a neomorphism design

Here are some steps that help us to create a neomorphism design.

• Choose same background color for both parent(page) and child element (like a box).
• The elements should have two shadow – dark and light.
• If we choose rounded edges then design will look pretty cool.
• Elements can have an optional subtle border to improve contrast and make the edges a bit sharper.

So let’s start coding our Neomorphism Form…

HTML code

Below is the HTML code to design a neomorphism design.

<div class="container">
        <div class="title">Login</div>
        <div class="inputs">
            <label>EMAIL</label>
            <input type="email" placeholder="enter your email here" />
            <label>PASSWORD</label>
            <input type="password" placeholder="enter your password" />
            <button type="submit">LOGIN</button>
        </div>
</div>

CSS code

Now the real work begins to design a Neomorphism design.

First let see basic css code that help us to arrange our elements on the center of the page.

body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        background: #ecf0f3;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        place-items: center;
        overflow: hidden;
        font-family: poppins;
 }

Now we start adding the neomorphism feature to our form container.

.container {
        position: relative;
        width: 350px;
        height: 400px;
        border-radius: 20px;
        padding: 40px;
        box-sizing: border-box;
        background: #ecf0f3;
        box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
 }

Now it’s time to do CSS for others elements like title, inputs, labels and button.

.title {
        margin-top: 10px;
        font-weight: 900;
        font-size: 1.8rem;
        color: #1DA1F2;
        letter-spacing: 1px;
        }

.inputs {
        text-align: left;
        margin-top: 30px;
}

label, input, button {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
}

label {
        margin-bottom: 4px;
        }

label:nth-of-type(2) {
        margin-top: 12px;
}

input::placeholder {
        color: gray;
}

input {
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 14px;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
        margin-top: 20px;
        background: #1DA1F2;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 900;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
        transition: 0.5s;
}

button:hover {
        box-shadow: none;
}

Last word

Hope you enjoy this short tutorial on CSS Neomorphism.
Must visit- Our BLog