
The technological world is growing quick, every day some talented people come up with new technologies. If you are one of those people, you are a great guy! But if you are not, stop them from overtaking you, by learning what they have achieved.
I have answered two fundamental questions in this story:
- What is Neumorphism?
- How to implement Neumorphism in WPF?
I hope my explanation will help you apply this new technology to your upcoming projects.
What is Neumorphism?
Neumorphism is a new Design Style trend in 2020. Actually, its first use was in the last of 2019.
Before we define Neumorphism, Let us see the previous design styles:
- Skeuomorphism: is a style of interface elements that mimic their real-world equivalents in how they appear and how the user can interact with them.
- Flat design: is a style of interface design emphasizing minimalist use of simple elements, typography, and flat colors. It is a commonly used style for designing a web or mobile interface.
 | (Right) Icon from icons png.](https://towardsdatascience.com/wp-content/uploads/2020/06/1nfG7Kj77tw3LZas60aPxpQ.png)
Skeuomorphism style seems like reality. Flat design looks digital, but it is simple.
Neumorphism combines Skeuomorphism and Flat design: It is real and simple at the same time. With this style, we can give a unique experience to our users.
Neumorphism cares about making realistic elements with simple shapes and colors.
How to implement Neumorphism in WPF?
Together, we will implement Neumorphic Button like this:

1. Overview
A Neumorphic element has a different way of representations (See images below), and based on the element behavior, we can decide which representation should we use.



To apply Neumorphism style for any element, you must implement these three main properties:
- background of the element must be as same as its Main container.
- Dark shadow must be applied to one of the element’s corner.
- Light shadow must be applied to the opposite corner.

2. Let’s start coding
I divided the coding process into 4 parts:
- Making outer Neumorphic Button style.
- Making inner Neumorphic Button style.
- Applying animations.
- Adding a nice Icon.
You can get all the code samples from here. Although the code was written with XAML language, you can still turn the same concepts into code with your favorite language.
1. Making outer Neumorphic Button style
Open Visual Studio, create a new Wpf application, and name it "Neumorphism". In this example, the solution name is "Neumorphism".
Open Neumorphism.xaml, and add the following code:
We have a grid element named OuterGrid which represents the main background color, also we have two Border elements: OuterLowerBorder to represent the dark shadow, and OuterUpperBorder to represent the Light shadow.
Very easy, right? With just two elements(grid and borders) we have obtained Neumorphism to our design.

2. Making Inner Neumorphic Button style
If we just change the background of OuterLowerBorder and OuterUpperBorder from (#E0E5EC) to (Transparent), we will get another Neumorphism representation, I call it outer inner style because it is a mix between outer and inner style.

In order to change this to Inner style, we must hide the outer shadows (light and dark) that surrounding the borders and keep the inner shadow visible. We can do this by surrounding our borders with another border. This new border named SurroundingBorder must have the same properties as our main borders. Insert InnerGrid implementation into MainGrid implementation as following:

3. Applying Animations
We have reached the most important part of this tutorial: How to make our Button? And How to make it clickable?
All we need to do is add the outer style above the inner style and make it disappear and appear according to user interaction.
The following code shows how to combine between outer and inner style:
To make these borders interact with the user, as you can see in the animated image above, we need to add some triggers to the Upper border in MainGrid which is OuterUpperBorder.
In OuterUpperBorder triggers, I have implemented two events: The MouseDown event, and the MouseUp event.
In the MouseDown event trigger, I’ve made four animated changes to our Neumorphic Button to transform it from outer style to inner style:
- Hiding OuterGrid by reducing its Opacity to 0.
- Reducing the Width and Height of OuterUpperBorder and OuterLowerBorder (outer borders).
- Decreasing the ShadowDepth of OuterDarkShadow and OuterLightShadow (shadows of outer borders).
- Increasing the ShadowDepth of InnerDarkShadow and InnerLightShadow (shadows of inner borders).
In the MouseUp event trigger, I’ve made four animated changes to our Neumorphic Button to transform it from inner style to outer style (as same as the MouseDown event trigger but in the opposite direction):
- Displaying OuterGrid by turning its Opacity to 1.
- Expanding the Width and Height of OuterUpperBorder and OuterLowerBorder (outer borders).
- Increasing the ShadowDepth of OuterDarkShadow and OuterLightShadow (shadows of outer borders).
- Decreasing the ShadowDepth of InnerDarkShadow and InnerLightShadow (shadows of inner borders).
4. Adding a nice Icon
This part is not important: you can put whatever content you want in MainGrid (Upper layer).
I used an Icon from Material design icons. If you want to keep going with me, you must install Material Design In Xaml Toolkit on your project. This guide Super QuickStart will help you with that.
The following code demonstrates how to add Icon to MainGrid children:
Now, add Icon’s animations to the MouseDown and MouseUp event trigger:
When the Mouse down:
- LoveIcon color will return to its original state (LightGray).
- LoveIcon width and height will decrease.
When the Mouse Up:
- LoveIcon color will change to Red.
- LoveIcon width and height will increase.
Finally, you did it! Run the project and see what you have achieved.
Thank you for your time. I hope you found your purpose and enjoyed reading my article. If you have any questions or notes, feel free to write it in the responses here.