What's the new (Neumorphism) design style?

Neumorphism (also known as Soft UI) is a combination of "New" and "Skeuomerphism". It's in 2020. It's popular around the years, and it's characterized by the use of extremely subtle shadows and high light, which makes UI The elements look like they're "crowded" from the background, or they're dented in the background. This style seeks highly concise, elegant and physically sensitive visual experience.

1. Core rationale for the new formulation: Shadows

The key to achieving the effect of the new formulation is to use two shadows simultaneously: one Dark Shadow (usually under right) and one Light High (usually above left). The colours of these two shades must be calculated on the basis of the background colours:

Dark shadow: It is slightly darker than the background (usually less bright or more saturated).
Highlight: A lighter color than the background (usually a higher brightness).

This is why the new formulation usually requires that the background should not be pure black or white, as pure colour cannot generate enough depth through comparison.

2. How can new language be used on the web page?

The new formulation is best suited for interactive elements such as buttons, cards, input boxes, etc. But it needs to be noted that because of its low contrast, overuse may result in Accessibility Problem. It is suggested that it be used only as visual decorations or that it be accompanied by a visible emphasis on key operations (e.g., the gradient context in which this tool is used).

3. Advantages of this generator

This tool not only supports the underlying shadow parameter adjustment, but also provides for the rapid generation of four core shapes:

Plat (plain): Standard float effect.
Concave (Down): It's a gradual internal, it looks like a bowl of dim.
Convex (crumb): The internal reverse gradient looks like a ball-shaped bump.
Pressed (pressed): Use inset Shadow, simulation is pressed to state.

Common Question Answers (FAQ)

Q: Why do my shadow look dirty?
A: Make sure your background color is not pure gray. Try to add a little blue or purple to the background color, which makes the shadows more natural and more qualitative.

Q: Does this style fit the moving side?
A: It's perfect! However, in the context of high outdoor light, the shadows of low contrasts may be difficult to identify. It is suggested that a higher contrast option or clear border lines be provided for the mobile end user.