DEV Community

loading...
Cover image for CSS Neomorphism design -easy steps to create

CSS Neomorphism design -easy steps to create

creativesiddharth profile image siddharth pandey ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
 }
Enter fullscreen mode Exit fullscreen mode

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;
 }
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Last word

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

Discussion (0)

pic
Editor guide