We are going to explore something new and trendy, and dive deeper into the effect called neomorphism. Neomorphism is one of the most talked-about web design and UI trends in 2020. Let’s recreate two particular layouts to add a neomorphic look to the page.
Is it possible to recreate this effect in Elementor? Absolutely! Elementor Pro allows you to add custom CSS code to your elements, and this is the feature that is going to help us construct this trendy neomorphic look.
Neomorphism is the combination of the well-known flat user interface and old skeuomorphic principles. The main advantage of neomorphism is ‘freshness’. It brings a "new feel" to the interface that sets it apart from other styles. You can easily mix it with other styles, for example, with skeuomorphism. It is truly a "soft plastic” that is perfect for experiments.
Some designers adore neomorphism. At the same time, this style of the user interface is not clear for many people, especially for the elderly ones. It is very difficult to distinguish information from the interface because everything is flat. People may feel uncomfortable since they cannot understand the user interface. Tastes differ.
Your object has to have the same color that your background does.
Two layers of box-shadows - one is lighter (highlight) and one is darker.
Now let’s see in what cases neomorphism works and when to avoid the effect. In the case below it does work since you see the distinction between the card and the background.
However, it is not crucial for us to see this contrast. What you should not do is apply this effect to a button in the hope that it will be enough for the user to understand that it is a clickable button. It is fine to have a standard button look.
Let’s check another example with a pretty good design.
You see nice looking cards, but we would not recommend applying the effect to such elements as buttons or other icons that the users usually interact with. So, be careful with neomorphism for interactive objects. Still, that is a great idea for the cards and graphics.
Now, let’s jump back to the Elementor editor and try to create the neomorphism effect ourselves. As mentioned above, it is a great solution to use for the cards and some other minimalistic layouts. We will delete all the effects we have and start from scratch. A posts widget is used.
Let’s move on to the second case, a countdown timer, and apply a little bit different style to it.
That is how you can make this sort of look with the Elementor page builder and some custom CSS editing. Make sure you target the right class of the right objects on your page.
In the mobile and tablet view, it is performing quite well, so you will not have any device-specific issues.
The world of web design has been changing very quickly. Now neomorphism is gaining more and more popularity. In order to implement neomorphism to your website, experiment with it. Use different styles in the same design to create something truly brilliant. We are confident that no trend will dominate alone. Good design is always a combination of styles and good content.
Now you know how to bring some neomorphism to your design. We hope you have learned something new or at least had fun along the way.