Neumorphism is one of the more recent UI design trends to enter the scene, emerging as a twist on two of its predecessors: skeuomorphism and flat design.
With its subtle shadows, muted colour palettes, and floating elements, neumorphism makes for a striking UI.
But, if we put aesthetics aside, what implications does neumorphism have for usability and accessibility? Does this design trend have a place in real digital products, or is it best kept to your portfolio?
Keep reading. We’ll cover everything you need to know about neumorphism — including practical tips and best practices for how to incorporate it into your next design project.
What is neumorphism?
Neumorphism — otherwise known as “new skeuomorphism” or “soft UI” — is a UI design trend that sits between skeuomorphism and flat design.
It uses subtle shadows, highlights, and gradients to create the illusion that certain elements are extruding from the background or sinking into it, all while maintaining an otherwise flat and minimalist aesthetic.
Take this example of a food delivery app UI designed by Öztürk Erdağ:
Neumorphic design for a food ordering app, created by Öztürk Erdağ.
The left arrow icons have a sunken or indented appearance, while the kebab menu icon (three vertical dots) appears to be popping out from the screen. That’s the art of neumorphism in action!
Where did neumorphism come from? A brief history
Neumorphism stems from two major design trends: skeuomorphism and flat design. Let’s take a quick trip down memory lane to consider the (rather recent) history of this popular design approach.
In the late 1990s and early 2000s, skeuomorphism was all the rage in digital design. Technology companies (like Apple) wanted to create interfaces that felt as familiar as possible to consumers who were using certain products for the first time — like laptops and smartphones. With its focus on mimicking real-world objects in the digital realm, skeuomorphism was the preferred design choice.
But, as consumers grew more comfortable with digital interfaces, skeuomorphism’s overly detailed, hyperrealistic aesthetic started to feel a bit redundant — not to mention sub-optimal for smaller screens.
In 2013, skeuomorphism gave way to a new design trend: flat design. Flat design is essentially the complete opposite of skeuomorphism. It uses flat, 2D elements, clean lines, and simple shapes — with a notable absence of shadows and gradients.
Then, in 2019, neumorphism emerged as something of a middle ground. Designers began to combine the simplicity of flat design with skeuomorphism’s tactile, 3D effects — creating the soft, futuristic aesthetic that neumorphism is renowned for.
The fundamental principles of neumorphism
Neumorphism is all about creating soft, tactile designs that blend minimalist aesthetics with a sense of depth. There are five core principles of neumorphism that help to create this effect:
1. Monochromatic or muted colour schemes
While flat design is all about bright, high-contrast colours, neumorphism uses soft, muted colour palettes to create a cohesive visual style. UI elements are typically the same colour as the background, with slight variations in shade to create depth and structure.
You might have a light grey button with darker grey shadows, for example, blending into a grey background.
2. Subtle shadows and highlights
Shadows are the real star of the show in neumorphism, adding depth to give certain elements a 3D appearance. Dual shadows — one dark and one light — make components look like they’re either raised (extruded) or sunken into the background.
If you wanted to create a 3D-looking toggle switch that appears raised when “on”, for example, you’d add a light shadow at the top-left of the element and a dark shadow at the bottom-right.
3. Simple geometric shapes
Similar to flat design, neumorphism uses simple geometric shapes such as rectangles, squares, and circles. This keeps the interface clean and modern — and makes it easy to add depth with shadows and highlights.
4. Background integration
A classic feature of neumorphism is background integration — that is, when UI components look like they’re part of the background, either emerging from it or sinking into it.
A common example would be a search bar that looks like it’s been carved into the background, with its borders defined by soft shadows.
5. Low contrast
Because the emphasis is on softness and subtlety, neumorphic designs are typically low-contrast. This can make it difficult to distinguish certain elements from the background — so, if it’s not used carefully, neumorphism can impact usability and accessibility.
Now we’re familiar with what neumorphism is and its defining characteristics, let’s consider some examples.
Examples of neumorphic design in action
As you explore the neumorphic design trend, you might notice that there aren’t many real-world products or brands that fully embrace neumorphism. This is primarily due to concerns around usability and accessibility.
Still, we can find some great examples in conceptual designs and experimental prototypes, often shared on platforms like Dribbble and Behance.
With that, here are some examples of neumorphism applied to various concepts and product types.
Sleep cycle app by Devanta Ebison
SmartHome app concept by Igor Lutsenko
Digital clock by Gagandeep Singh
For further examples and inspiration, search “neumorphism” on sites like Dribbble and Behance.
When should you use neumorphism in your UI designs?
If you’re thinking about embracing the neumorphism trend for your next UI design project, it’s important to carefully weigh up whether or not this is the best approach.
As we’ve already mentioned, one of the biggest drawbacks of neumorphism is a lack of colour contrast, which can lead to usability and accessibility issues. As such, you must make sure that you’re not compromising the user experience for aesthetic purposes.
Neumorphism makes most sense in contexts where style and aesthetics take priority. If you’re designing, say, a website for a luxury cosmetics brand or the interface for a digital clock, there’s less emphasis on functionality — in other words, there aren’t so many interactions required between the user and the product. In that case, you’d have more freedom to play around with neumorphism.
But, if you’re designing products that require high functionality and a content-rich interface — like a healthcare or banking app — an entirely neumorphic design could significantly harm the user experience.
When it comes to creating websites and apps that will be developed and eventually used by real people, the reality is that you’ll always be prioritising functionality and accessibility over aesthetics. That’s why we don’t see many real-world products that fully embrace neumorphism.
But if you just want to come up with a fun concept for your UI design portfolio or simply flex your creative muscles and explore different styles and trends, you can have plenty of fun with neumorphism.
How to use neumorphism in UI design: 5 practical tips
Want to experiment with neumorphism in UI design? Here are some practical tips to help you get started.
1. Start with a muted or monochromatic colour palette
When designing with neumorphism, you want to create a soft and subtle aesthetic where shadows and highlights can blend naturally into the background without harsh contrasts.
To achieve this effect, you need a muted colour palette. Soft greys, pastel tones, and gentle whites are ideal — like this mobile data concept created by Eddie Luong for Interactive Labs.
Mobile data management concept by Eddie Luong for Interactive Labs, via Dribbble.
2. Decide which elements you want to emphasise with neumorphic styling
Next, identify key elements within your interface that you want to apply the neumorphic style to. Focus on interactive components that the user is likely to engage with frequently — such as buttons, toggles, sliders, and cards.
If you’re designing a music player app, for example, you might apply neumorphic effects to the play/pause button and the volume slider.
Neumorphic music app concept created by Tasfia Rahman, via Behance.
3. Use consistent light sources
The trick to creating effective neumorphic designs is to simulate real-world lighting — in other words, to mimic how shadows would appear if your UI elements were real, physical objects.
When applying shadows, maintain a consistent light source across the entire interface. You might imagine that your light source is coming from the top-left corner, for example, and then create all shadows and highlights with this light source in mind.
4. Layer subtle shadows and highlights
Now it’s time to apply shadows and highlights to your chosen UI components.
This creates the characteristic depth that neumorphism is renowned for, and it typically involves applying two shadows to each element: one to simulate light hitting the element (this is the highlight) and another to create a shadow where the light doesn’t reach.
If you want to create a raised effect, add a light shadow (highlight) to the top-left of the element, using a colour that’s slightly lighter than the background colour. Then add a dark shadow to the bottom-right of the element, using a colour that’s slightly darker than the background.
If you want to create an indented effect (where the element looks like it’s pressed into the surface), place the light shadow on the bottom-right of the element, and the dark shadow on the top-left.
5. Focus on rounded corners
To complete your neumorphic design, use rounded corners to create a soft, approachable aesthetic. Create rounded cards or buttons, for example, rather than sharp edges.
Take inspiration from this neumorphic to-do list app concept, where soft, rounded edges ensure a smooth and tactile appearance throughout the interface:
Designing with neumorphism? 3 golden rules for success
1. Use neumorphism sparingly
Neumorphism isn’t suitable for every design project, and over-using it can present major issues for usability.
To strike the right balance within your interface, err on the side of “less is more.” Apply neumorphic effects to just a few key components (such as buttons, toggles, or cards) while keeping the rest of the layout simple.
You can also combine neumorphism with other design styles, like flat design, to enhance clarity and functionality while still maintaining a soft, tactile aesthetic overall.
Of course, if you’re designing purely for aesthetics and experimentation, go ahead and use neumorphism liberally. As with any design decision, it ultimately depends on the context, your target audience, and your main objective.
2. Keep it simple
Neumorphism truly shines in clean, minimalist layouts where subtly raised or sunken components can take centre stage. Avoid crowding your interface with too many elements or intricate detail. Instead, opt for simple, uncluttered layouts that use plenty of white space.
This will not only help your neumorphic elements to stand out; it also keeps the interface intuitive and easy to navigate.
3. Prioritise functionality and accessibility
There are very few cases where it’s ok to sacrifice functionality and accessibility for aesthetics. If your designs are intended for real users, only incorporate neumorphism if you can do so without compromising usability and impacting the overall user experience.
Ensure adequate contrast between elements, supplement neumorphic effects with accessible features (such as tooltips, text labels, and high-contrast outlines), and always test your designs with real people.
Key takeaways and further reading
Neumorphism blends the clean minimalism of flat design with the depth of skeuomorphism to create a soft, tactile aesthetic. But, while this UI design trend is visually beautiful, it doesn’t score well in terms of usability and accessibility — meaning you’ll rarely find it in real-world products.
If you do want to leverage the neumorphism trend in your next UI design project, it’s best to do so sparingly. Keep our practical tips and best practices in mind, and don’t forget your ultimate goal: to create an intuitive, accessible, and functional experience for the end user.
If you enjoyed this post and would like to learn more about UI design, continue with the following:
- The ultimate guide to card design for UI (with examples)
- 10 awesome UI design tools to add to your stack
- Essential principles and best practices for mobile app desig
Looking for a more thorough UI design education? The UX Design Institute’s Professional Certificate in UI Design covers all the principles, tools, techniques, and skills you need to craft high-quality digital interfaces. In just 12 weeks, you’ll learn how to create pixel-perfect products — and obtain a professional, industry-recognised qualification. Whether you’re considering a career as a UI designer or simply want to level up your visual design know-how, you’ll come away feeling confident in your skills and ready for your next project. Visit the course page to learn more.
Emily is a professional writer and content strategist with an MSc in Psychology. She has 8+ years of experience in the tech industry, with a focus on UX and design thinking. A regular contributor to top design publications, she also authored a chapter in The UX Careers Handbook. Emily also holds a BA in French and German and is passionate about languages and continuous learning.
