CSS: Neumorphism 🔲

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. 📝

The Form Box

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:

Form Input

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:

Clickity Click — Buttons 🔘

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!📱