What is Neumorphism and how can it make your elements more interesting?

What is Neumorphism and how can it make your elements more interesting?
Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism.
Neumorphic UI elements look like they’re connected to the background, as if the elements are extruded from the background or inset into the background. They’ve been described by some as “soft UI” because of the way soft shadows are used to create the effect.
- Adrian Bece [Neumorphism and CSS]

Each year there are new trends in UI/UX design. Some breathtaking, others simple revamp of old designs. Neumorphism is one that I stumbled upon few years back.

In my personal experience, it can appear outstanding especially for mobile apps.

As we're doing some assignment for work, I grab the opportunity to try it.

The underlying idea is the use of border-radius, linear-gradient and box-shadow properties.

One side of the element has a lighter tone while the other has a darker one.

When solving a problem, I usually check if there is a free tool online to help. For example, if I‌ need a list of mock data, I‌ will search for a data generator. Similarly, I look for a neumorphism generator online.

You can select the properties. And copy paste the generated codes.