What Is Neumorphism?
Neumorphism, short for new skeuomorphism, is a UI design style where elements look softly extruded from the background, as if pushed out of the same material. Buttons and cards share the page's background color and gain shape from a paired light and dark shadow, producing a soft, tactile look. It became popular around 2020 as a fresh take on physical realism. Its serious drawback is accessibility: because elements share the background color and rely on faint shadows, contrast is often too low, making controls hard to see.
- What it is
- Soft UI where elements appear extruded from the same background material
- Signature technique
- Two shadows per element, one light and one dark, on opposite sides
- Emerged
- Around 2020 as a soft, tactile evolution of skeuomorphism
- Core CSS
- Paired box-shadow values in light and dark on the same background color (MDN)
- Major flaw
- Low contrast between elements and background often fails contrast minimums (WCAG 2.2)
What neumorphism is #
Neumorphism, a blend of new and skeuomorphism, is a user-interface style in which controls appear gently extruded from the surface they sit on, as though molded from the same soft material as the background. Rather than a button with its own color and a distinct edge, a neumorphic button shares the page's exact background color and gets its form purely from shadows: a light highlight on one side and a darker shadow on the other, which together make it look raised, or, with the shadows reversed, pressed inward. The result is a soft, monochromatic, almost plastic or clay-like aesthetic that many find visually pleasing and calming. It surged in popularity around 2020 as designers looked for a fresh alternative to flat design. Neumorphism is more an aesthetic experiment than a proven usability pattern, and it carries real accessibility costs, which is why we evaluate it critically rather than adopt it uncritically on our /services/ui-ux-design page, where usability outranks novelty.
How the effect is achieved #
The neumorphic look depends on a specific and precise use of shadows. Every element sits on a background of a particular color, and the element itself uses that same color, so there is no color difference to define its shape. Instead, form comes entirely from two shadows applied at once: a lighter shadow, usually toward the top-left, simulating light hitting the raised surface, and a darker shadow toward the bottom-right, simulating the shadow it casts. This paired highlight-and-shadow makes the shape appear to bulge softly out of the page. Reversing the two, putting the dark shadow inside, makes the element look indented, which designers use to show a pressed or active state. Rounded corners and a muted, low-contrast palette complete the soft, tactile impression. The technique is elegant in principle but fragile: it only works on a mid-tone background and collapses on pure white or black. Getting these subtle mechanics right is the sort of detailed implementation our developers handle on our /services/web-design page.
The appeal of soft UI #
Neumorphism's attraction is genuine. The soft, monochromatic surfaces feel calm and cohesive, with a tactile, physical quality that flat design deliberately abandoned. Because every element shares one background color, a neumorphic interface looks unified and clean, almost sculpted from a single piece of material, which can feel premium and distinctive. It evokes real-world objects, soft rubber buttons, molded plastic panels, without the heavy textures and gloss of older skeuomorphism, so it reads as a modern, restrained take on physical realism. For certain products, a music player, a calculator, a smart-home dashboard, a concept portfolio, the aesthetic can be striking and memorable, setting a design apart in a sea of flat interfaces. That visual appeal is why it spread rapidly through design showcases. The trouble is that its beauty and its usability pull in opposite directions, which is the central tension any team must weigh, exactly the kind of tradeoff we assess against real user outcomes on our /services/conversion-optimization page, where looks must not cost usability.
Building neumorphism in CSS #
Neumorphism is created with paired box-shadow values, one light and one dark, on an element that matches the background color. Here is the core technique, plus the pressed-in inset variant.
/* Shared background color is essential */
.scene { background: #e0e5ec; }
/* Raised (extruded) element */
.neu {
background: #e0e5ec; /* same as the scene */
border-radius: 16px;
box-shadow: -6px -6px 12px #ffffff, /* light, top-left */
6px 6px 12px #a3b1c6; /* dark, bottom-right */
}
/* Pressed-in (inset) state: shadows move inward */
.neu:active {
box-shadow: inset -6px -6px 12px #ffffff,
inset 6px 6px 12px #a3b1c6;
}The accessibility problem #
Neumorphism's fatal flaw is accessibility, and it is severe enough that most experts advise against using it for real, interactive products. Because elements share the exact background color and are defined only by faint shadows, the contrast between a control and its surroundings is usually far below the minimum ratios accessibility standards require, so buttons and inputs can be nearly invisible to people with low vision, and difficult even for users with normal sight in bright conditions (WCAG 2.2). Worse, there is often no clear visual difference between an interactive element and a decorative one, so users cannot tell what is clickable. Focus indicators and state changes, already subtle in this style, become hard to perceive. Text over the soft surfaces frequently fails contrast too. These are not edge cases; they affect a large share of users. Any serious use of neumorphism demands added borders, stronger contrast, or accent colors to remain usable, which is precisely the kind of remediation our /services/ada-compliance page addresses so no one is locked out.
Making neumorphism more usable #
If a project insists on the neumorphic aesthetic, several adjustments can rescue its usability without abandoning the look entirely. Adding a subtle border or a slight color tint to interactive elements gives them a defined edge and lifts contrast above the background. Reserving a clear accent color for primary buttons distinguishes the important action from the soft grey field. Using stronger, more visible shadows sharpens the shapes so controls are easier to perceive. Providing unmistakable focus states, a solid outline on keyboard focus, ensures keyboard users can navigate. Keeping text on higher-contrast surfaces rather than the soft background preserves readability. In practice, these fixes pull the design partway back toward conventional UI, which is telling: the more usable you make neumorphism, the less purely neumorphic it becomes. That tension is why it works better as an accent than a whole system. Balancing a desired aesthetic against hard usability requirements is exactly the negotiation we manage on our /services/ui-ux-design page for every project.
Common neumorphism mistakes #
The defining mistake with neumorphism is using it for a full, interactive product where its low contrast leaves users unable to find or operate controls. Related errors include applying it on pure white or black backgrounds, where the paired shadows have no room to show and the effect disappears, and giving interactive and decorative elements identical styling so nothing looks clickable. Many implementations omit clear focus states, stranding keyboard users, and run text directly on the soft low-contrast surface, hurting readability. Some designers use shadows so faint that shapes barely register at all, prioritizing subtlety over function. Each of these turns an appealing concept into an unusable interface. The honest takeaway is that neumorphism is best treated as a limited stylistic accent within an otherwise accessible design, not as a foundation. Reviewing whether a trendy style is quietly failing real users is the kind of practical check we provide, and you can request a free assessment at /free-website-audit to find out.
Neumorphism versus skeuomorphism and flat design #
Placing neumorphism next to its relatives clarifies what it is and why it struggles. Classic skeuomorphism, common in early smartphone interfaces, imitated real materials in detail, leather textures, glossy buttons, realistic switches, which was intuitive but heavy and dated quickly. Flat design reacted by stripping all that away for clean, high-contrast, purely digital surfaces that scale and load well. Neumorphism is a softer, minimal descendant of skeuomorphism: it keeps the physical, extruded feel but renders it in a single muted color with subtle shadows rather than rich textures. The problem is that in shedding color contrast for softness, it also sheds the very cues that make controls visible and usable, which flat design deliberately preserved. So neumorphism sits in an awkward middle, prettier than flat to some eyes but far less accessible in practice. Understanding this trade explains why most teams use it only as an accent. Weighing aesthetic trends against hard usability requirements like this is central to the design decisions on our /services/web-design page, where people always come before novelty.
Should you use neumorphism? #
Be cautious. Neumorphism is visually appealing but fundamentally at odds with accessibility, because its defining trait, elements sharing the background color and shaped only by soft shadows, produces contrast too low for many users to see clearly. For a real product with forms, buttons, and navigation that everyone must use, it is a poor foundation. Where it can work is as a limited accent: a single decorative panel, a concept piece, a portfolio experiment, or a small non-critical control, always paired with borders, accent colors, and strong focus states that push contrast back to acceptable levels. The more you make it usable, the less neumorphic it looks, which is the honest verdict on the style. If you love the soft, tactile aesthetic but need an interface that actually works for every visitor, our /services/web-design and /services/ui-ux-design teams can capture that feel selectively while keeping the overall design accessible and clear, so style never comes at the expense of people being able to use your site.
FAQ
What is neumorphism?
Neumorphism, short for new skeuomorphism, is a UI style where elements look softly extruded from the background, as if pushed out of the same material. Controls share the page's background color and get their shape from a paired light and dark shadow, creating a soft, plastic, tactile look popular around 2020.
Why is neumorphism bad for accessibility?
Because elements share the exact background color and are defined only by faint shadows, contrast between controls and their surroundings is usually far below accessibility minimums. Buttons can be nearly invisible to low-vision users, and it is often unclear what is clickable. This is why experts advise against it for real interactive products.
How do you create the neumorphism effect?
Give an element the same background color as its container, then apply two box-shadows at once: a light shadow on the top-left and a dark shadow on the bottom-right. This makes it look raised. Reversing the shadows with the inset keyword makes it look pressed in. It needs a mid-tone background.
What is the difference between neumorphism and glassmorphism?
Neumorphism makes elements look extruded from a solid, single-color background using paired shadows, giving a soft plastic feel. Glassmorphism makes elements look like frosted glass, translucent panels that blur a colorful background behind them. One simulates molded material, the other simulates transparent glass. Both are stylistic trends with accessibility caveats.
Is neumorphism still popular in 2026?
Its peak was around 2020, and it has faded as a full-interface trend largely because of its accessibility problems. It still appears as a decorative accent in concept designs, portfolios, and certain apps. Most teams now use it sparingly rather than as a foundation, favoring styles that keep controls clearly visible and usable.
Can neumorphism be made accessible?
Partly, by adding borders or tints to interactive elements, using accent colors for primary actions, strengthening shadows, and providing clear focus states. These fixes raise contrast and make controls findable, but they also pull the design away from pure neumorphism. It works best as a limited accent within an otherwise accessible interface.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?