A blog for everybody who loves coding.

CSS Neomorphism design -easy steps to create

coding touch

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 below).

CSS Neomorphism Form

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 Words

Hope you enjoy this short tutorial on CSS Neomorphism.

Codepen link

Keep coding.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp