A couple weeks ago I thought about experimenting with Neumorphism, since I haven't been doing much of it despite it's growing popularity. The time has come to dip my toes into it and form an educated opinion.

It is an aesthetically pleasing style and I am a sucker for some eye candy, so I was looking forward to seeing how I can integrate this style into my design library.

I started with gathering some references and studying their styling composition and shape language. At first glance I saw that the main tools used to achieve the neumorpic style are gradients, drop shadows and inner shadows — but with a twist. Instead of being one consistent color, the shadows are usually composed of two colors separated at a 45 degree angle to give the appearance of bevel and emboss.

This embossed style would be effortless to reproduce in Photoshop or a 3D tool, but as UI designers we're limited to using tools that are in line with front-end technologies. Making a cool looking UI that cannot be built in a scalable manner is not an option.

So the next best thing to give the appearance of bevel and emboss is to use two separate shadows on a single element, which is actually supported in CSS.

box-shadow: -13px -10px 21px 0 #FFFFFF, 13px 13px 21px 0 rgba(81,87,126,0.15);
You can specify multiple shadows separated by a comma.

Once this door opens up to us, we can start applying as many shadows as we need for a single element to create the illusion of a 3D form. Granted, I stuck with just two for the duration of my experiments but in theory you can go as detailed as you want.

The next steps are to play with gradients, isolate foreground elements from the background usually by applying lighter gradients on them, or break up the monotone cool greys with some color.

This is the gist of what I noticed during my dive into Neumorphism from a technical standpoint.

I think it is a nice style, and it has it's uses, but I feel like the pure Neumorphic style is a bit too much for my taste.

I might revisit it in combination with a more traditional UI style, because I see a potential of generating visual appeal through contrasting the flat style with the Neumorphic one.

In it's purest form I wouldn't use it for complex applications, because I think it generates sensory overload, similar to recent Michael Bay movies. I am not against an explosion or two, and the more robots fighting the better, but let's not make a 3 hour movie about a robot fight with explosions in the background.

I feel the same way about Neumorphism. I think it would work great for an alarm app, or a to-do list, but if you want to create a complex web application you should "cut" it with a conventional style.

You can find some of the experiments below and download the source files to play around with them.

Neumorphic UI Components Neumorphic UI Components Neumorphic Stats Neumorphic Components Neumorphic Components