Neumorphism is a web design style that makes interface elements look like they are softly extruded from or pressed into the background. Using a single background color with subtle dual light and dark shadows, buttons and cards appear to gently rise or sink, creating a tactile, almost physical look that sits somewhere between flat design and skeuomorphism.
Neumorphism, sometimes called soft UI, had a viral moment and remains a recognizable aesthetic with a small but devoted following. It is also one of the most misunderstood styles, because its signature softness creates serious usability and accessibility problems when applied carelessly. This guide explains what neumorphism is, where it came from, when to use and avoid it, how to implement it well in Framer, and how to keep it accessible.
What Is Neumorphism?
Neumorphism, a blend of new and skeuomorphism, is built on a simple visual trick. An element and its background share the same base color. The element is given two shadows: a dark shadow on one side and a light highlight on the other. This dual shadow makes the shape look like it is either extruded from the surface, as if pushed up from underneath, or inset into it, as if pressed down. The result is a soft, monochromatic, low-contrast look where controls seem molded from the same material as the page.
The effect is genuinely distinctive. Unlike flat design, which removes all depth, or skeuomorphism, which mimics real-world materials in detail, neumorphism uses depth abstractly. Nothing looks like leather or metal; everything looks like the same soft plastic surface gently shaped into buttons and panels. It is closely related to, but distinct from, glassmorphism, which uses transparency and blur rather than soft extrusion.
The Origins of Neumorphism
Neumorphism exploded into the design community around 2019 and 2020. A designer’s concept shots on Dribbble showing soft, extruded interfaces went viral, and the style spread rapidly through design portfolios. It arrived as a reaction to years of flat design dominance. After flat and material design had stripped interfaces of depth, neumorphism offered a fresh way to bring tactility back without fully returning to the heavy realism of early skeuomorphic interfaces.
The hype was intense and short. Within a couple of years, the design community had largely cooled on neumorphism, not because it was unattractive but because it proved hard to use well. The same softness that made it appealing in static concept art made it problematic in real, interactive products. What remains is a niche but persistent style, used selectively where its soft aesthetic fits and its weaknesses can be managed.
When to Use Neumorphism
Neumorphism is a specialty tool, not a default. It works best in controlled contexts where its soft, minimal aesthetic adds value and its low contrast does not cause harm.
- Single-purpose apps and dashboards: Music players, smart-home controls, and calculators where a small set of clearly framed controls suits the soft look.
- Accent elements: Using neumorphism on a few key components rather than an entire interface.
- Premium, calm brands: Wellness, audio, and lifestyle products where a quiet, tactile feel matches the brand.
- Concept and showcase work: Portfolio pieces and design explorations where aesthetics lead.
The unifying theme is restraint. Neumorphism shines as a deliberate accent in a focused interface, not as a system applied to every element on a content-heavy site. Used sparingly, it adds a memorable tactile quality. Used everywhere, it overwhelms. The judgment involved mirrors good visual hierarchy, where you decide what deserves emphasis.
When to Avoid Neumorphism
Neumorphism should be avoided in most mainstream, conversion-driven, or content-heavy websites. Its core problem is contrast. Because elements share the background color and rely only on soft shadows, the boundaries between interactive and non-interactive areas can be nearly invisible. Buttons stop looking clickable, form fields blur into the page, and the whole interface can feel washed out.
Skip neumorphism for ecommerce, lead generation, and any experience where users must quickly find and trust calls to action. Avoid it for accessibility-sensitive audiences, since the low contrast fails many users with visual impairments. And avoid it on busy pages, where multiple soft elements compete and the depth illusion collapses into mush. If a clear, high-contrast call to action drives your business, the soft aesthetic works against your CTA button design rather than for it.
Real Examples of Neumorphism
Neumorphism is most visible in concept work and focused apps rather than large commercial sites. The strongest real-world uses tend to be single-purpose interfaces: a music player with soft, extruded play and skip controls, a smart-home panel with gently raised toggles, or a fitness app with tactile, framed buttons. These succeed because the limited set of controls gives each element room and because the designers added extra cues to keep controls discoverable.
You also see neumorphism used as an accent in otherwise conventional interfaces, where a single card or control adopts the soft look to draw a particular kind of attention. The failed examples, by contrast, apply neumorphism wholesale to a full website, and the result is a low-contrast field where nothing stands out. The lesson is consistent: neumorphism rewards focus and punishes excess.
How to Implement Neumorphism Well
Executing neumorphism well means embracing its aesthetic while actively compensating for its weaknesses. A few practices make the difference.
Master the Dual Shadow
The entire effect rests on two shadows: a darker one on the bottom-right and a lighter highlight on the top-left, on a matching background. Keep the light source consistent across every element so the depth illusion holds. In CSS this is two values in a single box-shadow declaration, one dark and one light. Subtlety matters; shadows that are too strong look harsh, while shadows that are too weak vanish.
Add Contrast Cues Deliberately
Because neumorphism is naturally low contrast, you must reintroduce clarity. Use color, iconography, a stronger border, or a clear active state to make interactive elements obviously clickable. The pressed-in versus raised states are especially useful: an inset shadow on a focused input or an active button gives crucial feedback that the soft look otherwise hides.
Limit the Palette and the Scope
Neumorphism depends on a single, usually muted base color. Pick a light gray or soft tone and build the whole system around it. Then limit how many elements use the effect. A focused set of neumorphic controls reads as intentional; a page full of them reads as flat and confusing. Thoughtful color theory helps you choose a base that supports the effect without going lifeless.
Building Neumorphism in Framer
Framer is well suited to neumorphism because it gives precise control over shadows, colors, and component states on a visual canvas. You can apply layered shadows to a frame, fine-tune the light and dark values until the soft extrusion looks right, and reuse the result as a component across your project. Framer’s effects and filters let you dial in the subtle shadows and depth that define the style without writing custom code.
Crucially, Framer’s variants system makes it easy to build the raised and pressed states that good neumorphism needs. You can define a default extruded state and an inset active or focused state, then wire them to hover, tap, and focus interactions, giving users the feedback the soft aesthetic tends to lose. At Framer Websites, we use styles like neumorphism with discipline, applying tactile depth where it strengthens the experience rather than where it muddies it. If you want a site that uses modern aesthetics without sacrificing usability, explore our work or contact us.
Accessibility Considerations
Accessibility is neumorphism’s defining challenge. Its low-contrast, shadow-based boundaries often fail color contrast requirements and make interactive elements hard to perceive, especially for users with low vision. To use the style responsibly, never rely on soft shadows alone to indicate that something is clickable. Add a clearly contrasting label, icon, border, or color to every control, ensure focus states are strongly visible for keyboard users, and verify that text and meaningful boundaries meet contrast standards. Provide obvious active and focus feedback, and test the interface with assistive technology. When you cannot make a neumorphic element clear enough to pass accessibility checks, choose a clearer style for that element. Inclusion outranks aesthetics, and the standards are laid out in our website accessibility guide.
Frequently Asked Questions
What is neumorphism in web design?
Neumorphism is a soft UI style where interface elements appear to be extruded from or pressed into the background. It uses a single background color combined with a dark shadow on one side and a light highlight on the other, making buttons and cards look gently raised or inset. The effect is tactile, monochromatic, and low contrast.
Why did neumorphism fall out of favor?
Neumorphism cooled because it proved difficult to use well. Its signature softness produces very low contrast, which makes interactive elements hard to see and often fails accessibility standards. The style looked stunning in static concept art but struggled in real, interactive products where users need to quickly identify and trust clickable controls.
Is neumorphism accessible?
Neumorphism is challenging for accessibility because its low-contrast, shadow-based boundaries can fail contrast requirements and make controls hard to perceive. It can be made accessible only with deliberate effort: adding contrasting labels, icons, or borders to interactive elements, providing strong focus states, and verifying contrast. When an element cannot meet accessibility standards, a clearer style should replace it.
How do I create neumorphism in Framer?
In Framer you apply layered shadows to a frame, using one dark shadow and one light highlight on a matching background color to create the soft extruded effect. Framer’s effects controls let you fine-tune the depth, and its variants system lets you build raised and pressed states tied to hover, tap, and focus interactions so the controls give users clear feedback.