Neumorphic design study

Experiment

April 7, 2020

Neumorphic design, or just neumorphism, is supposed to be the next big thing in design for 2020, so I thought I'd give it a try using CSS.

Disclaimer: I am not a designer! This is merely a simple study / experiment on how this particular style could be achieved, and my thoughts about it.

Take a look at the CSS file here.

Basics

The most basic setup is an element, like a <div>, with a very light background color like #eee, but not completely white. This element must share the color with the background it is on.

Now, to make it "pop", we add the box-shadow property. We need two shadows, one that will mimic a light source, and another one that will play the role of the casted shadow by that light.


	.neu-card-small {
		box-shadow: -6px -6px 15px 0px rgba(255, 255, 255, 0.7),
				6px 6px 15px 0px rgba(0, 0, 0, 0.1);
	}
		

We make the "light source" come from the upper left corner of our element, meaning that the shadow will be casted on the lower right corner of the element.

Something important to make note of here is the colors of the shadows. I guess this is more of a personal matter, but in my case I didn't want the light nor the shadow to be very harsh (reason for the blur radius set to 15px as well), so although I used absolute white and black, I played with their opacity until I was hapy with the result.

With the basics covered I started playing with other variations, like circles, insets, and borders.

Colors

Colors were not as easy as I thought they'd be. Technically you could apply this style with any color palette you want, but I found it worked better with pastel colors.

Using colors other than white presented a problem with the shadows too, as using completely white or black yielded weird-looking results. So, what I did was use the same base color, and obtain some lighter and darker shades. This was made on the fly, I don't have a formula on how light or dark these new shades should be.

For example, the pink style its base color is #E7BDB3, the light source ended up being rgba(252, 204, 194, 0.7), and the shadow rgba(100, 80, 75, 0.2)

Base color: #9BD3CB
Light: rgba(174, 236, 227, 0.7)
Shadow: rgba(60, 102, 96, 0.2)

Base color: #A4C9D7
Light: rgba(176, 224, 241, 0.7)
Shadow: rgba(59, 93, 104, 0.2)

Base color: #303030
Light: rgba(255, 255, 255, 0.1)
Shadow: rgba(0, 0, 0, 0.7)

Interactions

After I was comfortable with my styling I played with some actions: a button and a slider.

For the button I used the inset style when it is "pressed" and toggled the color of the power icon. For slider I also tried to make it like inset-y like.

Final thoughts

I like this kind of style, it is not very hard to recreate it using CSS (at least simple stuff like in this post) and I believe it feels clean, and light.

On the negative side though, I don't feel like it is a style that can be applied to every application, maybe just some very simple and minimalistic web apps.

As for the interactions, they don't feel as satisfying as I though they'd be, at least on desktop. The button felt extremely nice when I pressed it on mobile though.

If you've got questions, rants, suggestions, death threats or whatever, feel free to send me an email: info@amedpal.com