You see a button that looks softly pressed out of the screen. It has no hard border. It seems to be made from the same material as the background. That style is called neumorphism. This guide explains what it is, how it works, and how to use it well.

What Is Neumorphism?

Neumorphism is a UI design style that makes elements look softly extruded from the background. It uses two shadows, one light and one dark, to create a gentle 3D effect. The background and the element share the same color, so the element feels like part of the surface. The name blends “new” and “skeuomorphism.” It borrows the depth of skeuomorphism but keeps the clean, minimal look of flat design.

A Short History

The style rose to fame in late 2019. Designer Alexander Plyuto shared a banking app concept on Dribbble that showed soft, pushed-out buttons and cards. Designer Michal Malewicz later named the trend and helped spread it. Many designers loved the calm, modern look. Soon, the style filled design portfolios and concept shots. It was less common in real products, mainly because of usability concerns.

How Neumorphism Works

The look depends on a few simple techniques. Designers pick a soft background color, often light gray or a muted tone. The element uses the same or a very close color. A light shadow sits on one side, usually the top left, as if light hits from that angle. A dark shadow sits on the opposite side, usually the bottom right. Together, these shadows make the shape look raised. Reverse them inside the element, and it looks pressed in. This is often used for active states, such as a toggle that is switched on.

Why Neumorphism Matters

Neumorphism shows that depth still has a place in modern design. It adds a tactile feel without heavy textures. It looks sleek and calm, which suits music players, smart home controls, and wellness apps. It also gives designers a new way to show states. A raised button looks ready to press, and a sunken one looks active. Even if the full style is rare, its ideas now appear in many soft, layered interfaces.

Real-World Examples

Smart home controls. Dials, sliders, and toggles that look like physical knobs suit this style well.

Music players. Play buttons and volume sliders look like real hardware but stay clean.

Calculators. Soft keys with pressed states feel tactile and simple.

Fitness and wellness apps. Cards and progress rings with gentle shadows create a calm mood.

Banking concepts. Many early neumorphic designs showed balance cards and payment buttons in this style.

Toggle switches. A raised switch moves into a pressed state to show it is on.

Neumorphism vs Skeuomorphism vs Flat Design

Skeuomorphism copies real objects with rich textures and strong shadows. Flat design removes depth and detail entirely. Neumorphism sits between the two. It keeps soft depth and a tactile feel, yet it avoids textures and realistic detail. Flat design gives the best clarity and speed. Skeuomorphism gives the strongest real-world cues. Neumorphism looks refined but often gives weaker contrast than both.

Pros and Cons of Neumorphism

Pros:

• Looks modern, soft, and polished.
• Adds depth without heavy textures.
• Gives clear raised and pressed states.
• Works well for small, focused interfaces.

Cons:

• Low contrast makes elements hard to see, especially for users with low vision.
• Buttons can look like part of the background, which weakens affordance.
• Hard to use with dark or colorful themes.
• Shadows can look muddy on some screens.
• Difficult to scale across large, complex products.
• Often fails accessibility standards such as WCAG contrast rules.

When to Use Neumorphism

Use it sparingly. It works best for small interfaces with few controls, such as a music player, a smart device panel, or a single dashboard card. It also suits concept designs and portfolio pieces where mood matters more than heavy use. For forms, e-commerce sites, and data-heavy tools, clearer styles are a safer choice. When the stakes are high, such as banking or healthcare, readability should come first.

Neumorphism Best Practices

• Check contrast first. Make sure text, icons, and borders meet WCAG contrast ratios.
• Add a clear accent color. Use one bold color for key actions so they stand out from the background.
• Use it for a few elements only. Apply it to cards or key buttons, not the whole screen.
• Keep shadows subtle but visible. Test on different screens, since shadows can fade on low-quality displays.
• Show states clearly. Use raised for default and pressed for active, and add color or icons as extra cues.
• Add labels. Do not rely on shape alone to explain what a control does.
• Mix with flat elements. Combine soft shadows with solid color blocks and clean type for better clarity.
• Keep the background simple. Busy or dark backgrounds break the effect.
• Support keyboard and screen readers. Provide clear focus outlines and proper labels.
• Test with real users. Check whether people can find and use every control.

Common Mistakes to Avoid

The biggest mistake is weak contrast. When everything shares one soft color, users cannot tell what is a button and what is decoration. Another error is using the style across an entire product. It grows tiring and hard to scan. Some designers rely on shadows alone and add no color cues, which hurts accessibility. Others forget about states, so users cannot tell if a control is on or off. Finally, many skip testing on real devices, where shadows may look different from the design tool.

Final Thoughts

Neumorphism offers a soft, modern look with a touch of realism. It shows how depth can make an interface feel tactile and calm. But beauty alone is not enough. Clear contrast, strong cues, and good accessibility matter more. Use the style in small doses, add accent colors for key actions, and test with real people. When used with care, neumorphism adds charm without getting in the way of usability.