What is neumorphism and is it here to stay?

Profile picture of Coren Feldman

{date}

{#hash1}

{#hash2}

Illustrations by {name}

A mix of skeuomorphism and flat design, neumorphism has made waves in the design community. But will the trend catch on?

8 min read

The word 'neumorphism' on a white background designed in a neumorphic style

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

If you’ve spent any time in design blogs or communities in the last year, you’ve likely heard of neumorphism, a new design trend that’s fascinated and divided the UI/UX community. But what is it, exactly, and is it the future of user interfaces? To answer that, we first need to understand the history behind it.


Digital design began with skeuomorphism, a design trend that relied on real-world parallels to convey digital ideas to first-time computer users. Designers achieved this by creating three-dimensional, realistic-looking elements. For example, skeuomorphic buttons would appear raised, and pressing them would sink them down, just as buttons behave in reality.


Flat design changed the way we look at digital products when it gained mainstream popularity in 2013. By disconnecting digital elements from real-world items, it allowed for design to become simpler and – true to its name – flat, by moving from three-dimensional to two-dimensional elements. Flat design is still used for the vast majority of digital products today.


Neumorphism is a new design trend believed to have been started in late 2019 by Dribbble user Alexander Plyuto, which has since inspired thousands of designs on the platform and other design communities. It borrows the real-world, three-dimensional elements of skeuomorphism while drawing on the simplicity of flat design. The result is a minimalistic-looking interface that feels almost tactile.



Neumorphism guidelines


The key to neumorphism is how it treats depth. While flat design has just two levels of depth (flat and raised), neumorphism has three: sunken, flat, and raised. This allows it to either highlight or de-emphasize different elements, focusing the user’s attention better.



Example of button design in neumorphism trend


Buttons, for example, will display as raised until the user presses them, at which point they will display on the sunken level.


Another important aspect of neumorphism is how it handles raised elements. Whereas flat design uses a drop shadow to create the effect of an element hovering above the background, neumorphism uses two shading – light on one side and dark on the other – to suggest that the raised element is attached to the background and not hovering above it.


The idea is that the light is bouncing off one side of the element, which is attached to the background, causing the shadow on the other side.



Light and shadow in neumorphic button UI



To achieve its clean look, neumorphism also tends to use light, pastel colors for the background and elements. The background and overlaying elements which usually have very similar, but slightly offset colors.


It borrows the real-world, three-dimensional elements of skeuomorphism while drawing on the simplicity of flat design.

A big differentiator between flat design and neumorphism is that neumorphism will very rarely use hard lines as borders for elements. In addition, neumorphism will almost exclusively use rounded corners to keep a soft look, refraining from any harsh angles.


While its use of three-dimensional elements are clearly borrowed from skeuomorphism, neumorphism uses much simpler icons and usually relies on shadows and gradients to achieve its three-dimensional effect, as opposed to detailed textures.



The appeal of neumorphism


As designers, we’re always looking for challenges and new ways to innovate and refresh user interfaces. Since the adoption of flat design close to a decade ago, there has yet to be a significant change in visual styles used in the design community, so the appeal of a brand new type of UI is easy to understand.


Neumorphism has a distinct look that clearly contrasts with the styles we’ve been using for seven (or more) years. It also utilizes different concepts than flat design or even skeuomorphism.


Its soft shadows and lack of hard, separating lines give it a fresh, clean feel that sets it apart from flat design. This has inspired many designers to contribute their interpretations and variations on the neumorphic style. The influx of these explorations are reminiscent of the creative surge that stirred the industry when flat design was initially introduced. Seeing something new – truly new – in the design world is rare.


Neumorphism imagines a soft, simple world of digital interactions that feels seamless and minimally intrusive. Combining the realism of skeuomorphism with the minimalism of flat design, neumorphism creates a glossy digital experience that pops out of your screen without overwhelming you.


Taking part in creating a new type of digital interaction is every designer’s dream. Being able to redesign existing experiences in a new way is both hard and rewarding, and neumorphism is the perfect opportunity to do just that.



Neumorphic UI design for knob and sliders


Challenges