CSS: Neumorphism 🔲

Milan Parmar
Feb 28 · 4 min read
Source: WEAREBRAIN.COM

When creating projects during my Flatiron course, I was always thinking about design and creating applications that had an appealing interface. 🤔

I came across many articles that touched upon modern design trends and one trend that stood out to me was neumorphism!

In this article, I will be explaining how I achieved a neumorphic design throughout one of my Ruby on Rails projects called “Reflections”, focusing on a form for login. 📝

Firstly, I focused on creating a neumorphic box that would contain the logo, form inputs and buttons for logging in.

I created a div with a class name of login-div and then typed up specific dimensions regarding its width, height and padding.

.login-div {
width: 430px;
height: 600px;
padding: 20px;
}
/* These specific design specs would vary with your application. Always consider consistency when creating any sort of boxes/forms. */

Next, I wanted to also make use of another modern design trend (which may not be such a big thing but definitely present everywhere)…rounded corners ⚪! To achieve this, we use border-radius like so:

.login-div {
...
border-radius: 40px; /* The higher the pixel, the greater the curve */
background: #ecf0f3;
}

You may have noticed that I added a background colour also. This is so that the box matches with the background of the whole website and then we will add a highlight and shadow to create the neumorphism.

To create the neumorphic effect, we would add a box-shadow and offset highlights on the top left and shadows on the bottom right, as seen below.

.login-div {
...
box-shadow: 13px 13px 20px #cbced1,
-13px -13px 20px #ffffff;
}

The final CSS would be:

The final box should look like:

The next step is to style the input fields but in a slightly different way. This is because the box is more of an ‘embossed’ design, whereas the input fields would be an ‘engraved’ look.

For all the input attributes, we would remove any borders, outline, background etc. so we can create a seamless engraved feel to the design.

.fields input {
border: none;
outline: none;
background: none;
font-size: 18px;
color: #555;
padding: 20px 10px 20px 5px;
}

We would then offset the highlights and shadow again but within the inputs, like so:

.username, .password {
margin-bottom: 30px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}

Overall the CSS would be:

I also added SVGs for the input fields for more detail. The box with inputs would now look like:

We now move onto the final piece which are the buttons. This would be similar to the outer box with an embossed look and therefore the CSS like so:

In my application, I used OAuth to allow users to sign in via Facebook and so added another button for this option. Here is the final neumorphic product:

I find neumorphism quite appealing and a seamless user interface. I hope you enjoyed reading and make use of neumorphism in your applications!📱

Star Gazers

“If you want to master something, teach it.”

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store