What Is Neumorphism in UI Design?

In 2019, a single Dribbble post by Alexander Plyuto changed how thousands of designers thought about depth in digital interfaces. The concept blew up fast. But what is neumorphism, really, and does it hold up beyond the hype?

Neumorphism sits between skeuomorphism and flat design, using soft dual shadows and monochromatic palettes to make UI elements look molded from the background itself. It looks great in mockups. In production, things get more complicated.

This article breaks down how neumorphic design works, the CSS behind it, where real products use it, and the accessibility problems you need to know before putting it into a live project.

What is Neumorphism

Neumorphism is a UI design style that blends skeuomorphism’s depth with flat design’s minimalism.

It uses soft shadows and monochromatic color palettes to make elements appear extruded from or pressed into the background surface.

Alexander Plyuto posted a banking app concept on Dribbble in November 2019 that went viral. Within weeks, thousands of designers started creating variations.

As of February 2020, Dribbble showcased 967 works tagged “neumorphism”, according to design analyst Masa Kudamatsu. The style spread so fast that Michal Malewicz wrote a follow-up article titled “Neumorphism will NOT be a huge trend in 2020.”

Sometimes called soft UI, the style keeps things clean and modern while adding just enough depth to make buttons, cards, and toggles feel almost physical.

No heavy textures. No gradients screaming for attention.

Apple borrowed from this approach when macOS Big Sur launched in November 2020. The app icons and translucency effects carried clear neumorphic influence, though Apple never went all-in on the style.

Where Does the Term Neumorphism Come From

Neumorphism is a portmanteau of “neo” and “skeuomorphism.”

Jason Kelly coined it in 2019. Michal Malewicz (CEO of Hype4) helped popularize the term through design articles on Dribbble and Behance.

The name signals exactly what it is: a modern rework of skeuomorphic thinking, stripped down to fit today’s minimal digital interfaces.

How Does Neumorphism Differ from Skeuomorphism

Skeuomorphism copies real-world objects into digital space.

Think early iOS: the Notes app looked like a yellow legal pad, the calculator had glossy raised buttons mimicking a physical device. Apple’s first few iOS versions heavily relied on this approach.

Neumorphism keeps the depth idea but drops the heavy realism.

No leather textures, no wood grain, no glossy reflections. Just soft dual shadows on a single-color surface that suggest physicality without recreating it.

The gap between the two comes down to restraint.

Skeuomorphism says “this IS a real object.” Neumorphism says “this behaves like one.”

How Does Neumorphism Differ from Flat Design

Flat design removed every trace of depth. Solid colors, sharp edges, zero shadows.

Clean, but sometimes too flat to signal what’s clickable and what isn’t. Research from eye-tracking studies shows participants performed better in flat design environments for task completion speed.

Key difference: flat design elements actually float above the background. Neumorphic elements are part of the background itself, extruded from the same surface like they were pressed from a mold.

Flat design uses bold, high-contrast colors to separate elements. Neumorphism relies on shadow and highlight instead, keeping the entire CSS color scheme monochromatic.

WCAG (Web Content Accessibility Guidelines) requires a minimum 3:1 contrast ratio for UI elements. Most neumorphic designs fail this threshold, making them difficult for users with visual impairments to perceive.

Color contrast issues affect 83.6% of all websites according to WebAIM’s 2024 Million analysis.

How Does Neumorphism Differ from Material Design

Google’s Material Design uses a z-axis system where elements stack on top of each other like sheets of paper.

One shadow per element. Clear elevation hierarchy.

Neumorphism doesn’t stack. Elements push out from the background or sink into it, with dual shadows (one light, one dark) creating that soft 3D effect.

Material elements hover. Neumorphic elements belong to the surface.

Both use depth cues. But Material Design feels layered and structured, while neumorphism feels molded and continuous.

In a 2024 survey of 137 French users aged 18-55, 45% preferred flat design for logos and interfaces, citing aesthetic appeal and clarity. Only 42% preferred skeuomorphic elements despite their familiarity.

What Are the Core Principles of Neumorphism

Five things define the neumorphic look: monochromatic palettes, dual shadows, rounded corners, a single consistent light source, and low contrast between elements and background.

Pull one out and the effect falls apart.

What Role Do Monochromatic Color Palettes Play in Neumorphism

Background and elements share the same base color, with only slight shade variations creating structure.

Off-white (#F4F4F4) or off-black (#252525) work best because pure white and pure black kill the shadow effect entirely.

Research from CSS design patterns shows typical neumorphic implementations use box-shadow values like box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff on light gray backgrounds. The first shadow uses a darker shade (#d1d9e6), while the second uses pure white (#ffffff).

Small bursts of accent color on call-to-action buttons break the monotony and guide user attention where it matters.

A study from UX Magazine found that users have surprisingly low tolerance for inconsistency in digital products. Inconsistent color schemes make products feel unreliable and erode user confidence.

How Do Dual Shadows Create Depth in Neumorphic Design

Every neumorphic element uses two CSS shadow effects: a dark one on the bottom-right and a light one on the top-left (or the reverse, depending on your light source direction).

This dual shadow setup is what separates neumorphism from standard drop shadows in flat or material interfaces.

Material Design uses two shadow layers for elevation (ambient shadow + key shadow), but neumorphism’s dual shadows work differently. Both shadows appear on the same element to create the extruded effect.

A single, fixed light source keeps every element consistent. Move the light direction between components and the whole interface looks broken.

UI design research indicates that light sources in natural settings typically come from a 45-degree angle or above. When users hold their phones, it’s at this angle, suggesting light originates from above rather than from the side or below.

Why Does Neumorphism Use Rounded Corners

Sharp corners add too much contrast and definition, which breaks the soft, molded look.

High border-radius values keep elements feeling like they belong to the background surface. Common neumorphic patterns use values like border-radius: 20px for boxes and border-radius: 50% for circular elements.

Psychological impact: research from design psychology studies shows rounded corners tap into fundamental human psychology. Sharp corners naturally create tension and formality, while rounded edges evoke feelings of safety, approachability, and playfulness.

The rounded shapes also help the eye flow through the layout more naturally, supporting better visual hierarchy across the screen.

Buttons with subtle roundness (2-4px) feel professional and clean, while moderate roundness (8-12px) feels friendly and modern, according to border-radius usage patterns in contemporary UI design.

What Is the Difference Between Extruded and Inset Elements in Neumorphism

Extruded elements appear raised from the surface (light shadow top-left, dark shadow bottom-right).

Inset elements appear sunken into it (shadows flip inward using the inset keyword in CSS).

/* Extruded button */
box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 
            5px 5px 9px rgba(94,104,121,0.3);

/* Inset button (pressed) */
box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), 
            inset 5px 5px 9px rgba(94,104,121,0.3);

Toggling between these two states gives buttons and switches their interactive feedback.

A toggle switch set to “on” might look extruded. Flip it off, and it sinks in.

That shift is the entire interaction language of neumorphic interface components.

Design consistency research shows that users execute tasks faster once they learn interface patterns. Consistency reduces cognitive load, making neumorphic state changes instantly recognizable after initial learning.

What UI Components Work Best with Neumorphic Design

Not every component suits this style.

The ones that work best are simple, single-purpose elements that benefit from tactile feedback: buttons, cards, toggles, sliders, and input fields.

How Do Neumorphic Buttons Work

Default state shows the button extruded with dual outer shadows.

On hover, shadow intensity increases slightly. On press (active state), shadows flip to inset, making the button look physically pushed in.

/* Default state */
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
            6px 6px 10px rgba(0, 0, 0, .15);

/* Hover state */
box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
            2px 2px 4px rgba(0, 0, 0, .1);

/* Active (pressed) state */
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
            inset 2px 2px 2px rgba(0, 0, 0, .15);

This three-state shadow system (default, hover, pressed) replaces the color-change approach that flat design uses for button hover effects.

Best practice from CSS implementation guides shows typical transition values of 0.2s ease-in-out for smooth state changes between button interactions.

Interactive elements can be too subtle, which hurts accessibility. One neumorphism accessibility example by Michael J. Fordham adds high-contrast borders and color changes to hover and click states to fix this issue.

How Do Neumorphic Cards and Containers Look

Neumorphic cards group content with a soft raised surface.

They work well for dashboards, profile sections, and media players where you need clear content separation without heavy borders or background color shifts.

Design research shows neumorphism works exceptionally well for dashboards, calculators, and settings panels where minimalistic but tactile feedback matters.

A SaaS project management tool redesign using neumorphic cards showed users spending 15% more time on the page and reporting a 25% increase in satisfaction, according to a Redlio Designs case study.

They fall apart on content-heavy pages. Too many raised cards side by side creates visual noise instead of clarity.

Neumorphism’s heavy reliance on shadows requires ample space for elements to be fully visible, as noted by designers working on dashboard implementations.

How Are Input Fields Styled in Neumorphism

Input fields use inset shadows to create a sunken area that visually says “type here.”

The inner shadow mimics a carved-out space in the surface, which is actually one of the more intuitive parts of neumorphic design.

input {
  box-shadow: inset 2px 2px 5px #b8b9be,
              inset -2px -2px 5px #fff;
  border: none;
  background: transparent;
}

Text inputs look like they were carved out of the background while buttons burst forth, creating clear visual hierarchy through shadow direction alone.

However, input fields face the same low-contrast accessibility issues. CSS Tricks notes that neumorphic elements take more space (inside padding and outside margin) due to shadows and rounded corners.

How Do Toggles and Sliders Behave in Neumorphic Interfaces

Toggles and range sliders are where neumorphism looks its best.

The raised knob on a sunken track feels like something you could physically grab and slide. These components benefit the most from the tactile, 3D-like quality of the style.

Calculator apps and settings menus align with neumorphism’s emphatic yet minimalist approach, while websites prioritizing large amounts of content find neumorphism distracting.

Pacgie research indicates that scalability issues arise in complex interfaces with many interactive elements, making neumorphism best suited for focused, minimalist applications with limited interactive components.

Fitness tracking apps apply neumorphic design to stat cards and progress indicators. Dashboard interfaces occasionally incorporate neumorphic elements for data visualization containers.

How to Implement Neumorphism with CSS

The actual code behind neumorphism is surprisingly simple.

Most of the effect comes from a single CSS property: box-shadow.

What CSS Properties Are Used for Neumorphic Effects

See the Pen
Neumorphic Elements by Maria Marin (@myacode)
on CodePen.

Three properties do most of the work:

• box-shadow with two values (one light, one dark) for the dual shadow effect
• background-color matched to the page background
• border-radius set high enough to keep edges soft

For an extruded element on a #e0e0e0 background:

box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;

For an inset element, add the inset keyword to both shadow values.

That’s it. The entire neumorphic look comes from this one pattern, repeated and adjusted across your components.

Performance consideration: box-shadow triggers painting operations in browsers. When layering multiple shadows, the browser performs more rendering work, according to LogRocket research on CSS performance.

On slower CPUs (4x throttling in Chrome DevTools), rendering with box-shadow more than doubles from 55ms to 117ms, while painting increases from 30ms to 72ms, based on SitePoint performance testing.

How to Create a Neumorphic Button with CSS

Start with a background-color identical to the body.

Add dual box-shadow values. Set border-radius to 12px or higher.

Remove all borders and outlines.

button {
  background: #e0e0e0;
  border: none;
  border-radius: 12px;
  box-shadow: 8px 8px 16px #bebebe, 
              -8px -8px 16px #ffffff;
  padding: 1em 3em;
  transition: 0.2s ease-in-out;
}

For the active/pressed state, swap outer shadows for inset shadows.

button:active {
  box-shadow: inset 8px 8px 16px #bebebe, 
              inset -8px -8px 16px #ffffff;
}

You can try a CSS box shadow generator to dial in the exact values before writing production code.

Optimization tip: avoid animating box-shadow directly. Use the will-change property to tell the browser the box-shadow will change, helping optimize rendering, according to CSS performance guides.

What Design Tools Support Neumorphic Prototyping

Figma, Adobe XD, and Sketch all handle neumorphic prototyping well since they support inner and outer shadows on the same element.

Tool-specific notes:

In Adobe XD, you have to duplicate the element on top of itself to add another shadow. In Figma, you can add multiple shadow effects to the same element, according to design implementation guides.

Neumorphism.io is a free browser tool that generates ready-to-use CSS code for neumorphic components. Created by Adam Giebl and built with React, it was featured on CSS-Tricks in March 2020.

The tool helps with colors, gradients, and shadows to adapt neumorphism or discover its possibilities. Multiple neumorphism CSS generators exist on GitHub with active development communities.

For quick mockup work, Figma’s shadow stacking makes it the fastest option.

You can preview light and dark shadow combos in real time without touching any code. Figma UI3 (launched in 2024) provides a more focused design environment with resizable and collapsible panels for easier shadow experimentation.

Resource availability: over 90+ free neumorphic design resources exist across platforms, including UI kits for Figma (with 3 color variables: dark, light, and purple), Adobe XD kits with dark and light modes, and Sketch files for mobile apps and dashboards.

A Figma plugin called Neumorphism Shadow Generator offers customizable light sources, shadow intensity control, gradient or solid backgrounds, and shape customization for flat, concave, convex, or pressed styles.

What Are the Accessibility Problems with Neumorphism

This is where neumorphism gets tricky.

The same low-contrast, monochromatic approach that makes it look good creates real web accessibility problems for a significant number of users.

Why Does Low Contrast Cause Usability Issues in Neumorphism

WCAG requires a minimum color contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Neumorphic interfaces regularly fail both thresholds because element boundaries depend on subtle shadow differences rather than strong color separation.

WebAIM’s 2025 Million analysis found that 79.1% of home pages have low contrast text below WCAG 2 AA thresholds. Low contrast text was the most commonly-detected accessibility issue across one million websites.

Color contrast issues affect 83.6% of all websites according to the same WebAIM 2024 analysis, making it the #1 accessibility violation on the web.

Users with low vision, color blindness, or even just bright ambient lighting will struggle to distinguish interactive elements from the background.

According to the World Health Organization, approximately 2.2 billion people globally have some form of vision impairment, making contrast accessibility a fundamental usability requirement, not just a compliance checkbox.

How Does Neumorphism Affect Visual Hierarchy

When everything is the same color and roughly the same elevation, it becomes hard to signal what’s clickable and what’s decorative.

Standard usability patterns rely on color, size, and contrast differences to guide attention. Neumorphism limits all three.

WebAIM research shows that 13.7% of pages had ambiguous link text like “click here” or “more”, making it difficult for users to understand what elements do without clear visual cues.

What Workarounds Improve Accessibility in Neumorphic Interfaces

A few practical fixes help:

Use bold accent colors on primary action buttons to make them stand out from the monochrome surface.

Research shows that pages with ARIA present had over twice as many errors (57 on average) than pages without ARIA (27 on average), so implementation must be careful and tested, according to WebAIM 2025 findings.

Increase shadow intensity and spread to create stronger element boundaries. Testing shows typical neumorphic implementations use values like box-shadow: 8px 8px 16px #bebebe but accessibility improvements require higher contrast.

Add ARIA labels and roles to every interactive element so screen readers can identify them.

Key ARIA statistics:

• 79.4% of home pages now use ARIA (up from 74.6% in 2024)
• 34.2% of form inputs are not properly labeled via <label>, aria-label, aria-labelledby, or title
• 80.5% of home pages have at least one ARIA landmark defined (up from 76.7% in 2024)

Combine neumorphism with accessible typography choices (high-contrast text on muted backgrounds).

For Level AAA compliance, normal text requires a 7:1 contrast ratio and large text requires 4.5:1. Most organizations target AA compliance as AAA can be restrictive for design flexibility.

Test with an accessible color palette generator before finalizing your design.

Implementation checklist:

1. Test contrast ratios with WebAIM’s Contrast Checker or similar tools
2. Ensure interactive elements have proper ARIA labels
3. Use stronger shadow values than typical neumorphic implementations
4. Add accent colors to primary actions
5. Verify keyboard navigation works for all interactive elements
6. Test with actual screen readers (NVDA, JAWS, VoiceOver)

Neumorphism doesn’t have to fail accessibility. But it takes extra effort that flat or material design doesn’t require.

With 4,605 ADA lawsuits filed in 2024 and the European Accessibility Act in force since June 28, 2025, ensuring proper accessibility isn’t just good design—it’s a legal requirement.

Where Is Neumorphism Used in Real Products

Most neumorphic design lives on Dribbble and Behance as concept work.

But a handful of real products and platforms have adopted the style, either fully or in selective components.

How Did Apple Use Neumorphism in macOS Big Sur

Apple released macOS Big Sur on November 12, 2020, and the update carried clear neumorphic influence.

App icons gained soft depth and translucency effects that moved away from the flat style Apple had used since iOS 7. Craig Federighi, Apple’s senior vice president of Software Engineering, called it “our biggest update to design in more than a decade.”

The dock icons looked subtly raised. System UI panels used layered translucency with soft shadows underneath.

Wikipedia describes Big Sur’s aesthetic as “neumorphism”, a portmanteau of new and skeuomorphism. All standard apps gained square shapes like iOS icons, with more shading and highlights to give a three-dimensional appearance.

But Apple didn’t go full neumorphism. They cherry-picked the parts that improved user experience and left out the low-contrast problems.

Consistent light source: With the exception of the Calendar icon, all Big Sur icons have shading and highlights from a consistent 12 o’clock light source, according to design analysis from Core77.

Smart approach, honestly. Take what works, skip what doesn’t.

However, some designers argued macOS Big Sur is flatter than ever, with removed textures and reduced contrast between UI elements. Andrew Denty noted that Apple completely dropped the aluminium-inspired window chromes dating back to QuickTime in the 1990s.

What Industries Commonly Use Neumorphic Design

Certain product categories suit the soft UI look better than others:

Finance and banking apps, where the clean, monochromatic surface feels premium and trustworthy. Alexander Plyuto’s original viral concept (November 2019) was a banking app that received over 220,000 views and 4,000 likes on Dribbble.

Music players and audio controls, where knobs, sliders, and toggle switches benefit from the tactile 3D effect.

Smart home dashboards with simple dial and button interfaces.

Health and fitness trackers displaying progress bars and metric cards on minimal backgrounds. Fitness apps apply neumorphism to stat cards and progress indicators.

The common thread: limited UI complexity, single-purpose screens, and interfaces where soft depth adds clarity instead of confusion.

Content-heavy products like news sites, e-commerce stores, or social platforms almost never use neumorphism. Too many elements competing on the same monochromatic surface creates a mess.

When Should You Use Neumorphism in a Project

Neumorphism is a strong style choice, not a default one.

Picking the right project for it matters more than getting the shadows perfect.

What Types of Projects Benefit from Neumorphic Styling

It works best when the interface is simple and the component count is low:

Portfolio sites and personal projects where visual impact matters more than dense functionality.

Single-function tools like calculators, timers, or dashboard panels with a handful of widgets. Calculator apps and settings menus align with neumorphism’s minimalist approach.

Landing pages built around one hero section and a clear conversion goal.

Prototype and concept work where you’re exploring a minimal design style before committing to production.

A SaaS project management tool redesign using neumorphic cards showed 15% more time on page and 25% increase in satisfaction, with conversion rates for paid upgrades also increasing (Redlio Designs case study).

If your project has fewer than 10 distinct interactive elements on screen at once, neumorphism can work. Beyond that threshold, you’re fighting the style instead of using it.

When Should You Avoid Neumorphism

Skip it for complex applications with deep navigation structures, multi-level menus, or dense data tables.

E-commerce product grids, SaaS platforms with dozens of controls, and any project with strict accessibility compliance requirements are all bad fits.

Legal consideration: With 4,605 ADA lawsuits filed in 2024 and the European Accessibility Act in force since June 28, 2025, neumorphism’s inherent contrast issues create legal risk.

Also avoid it when your brand relies on strong color identity. Neumorphism’s monochromatic constraint will fight your brand palette every step of the way.

A good test: build a quick wireframe of your layout first.

If the wireframe already looks cluttered with too many boxes, neumorphism will make it worse, not better.

Decision checklist:

Use neumorphism when:

• Interface has 10 or fewer interactive elements
• Single-purpose tool or simple dashboard
• Visual impact is priority over dense content
• You can dedicate time to accessibility fixes

Avoid neumorphism when:

• Strict WCAG compliance required
• Complex navigation or dense data
• Strong brand colors are essential
• Content-heavy layouts (news, e-commerce, social)

FAQ on Neumorphism

What is neumorphism in simple terms?

Neumorphism is a soft UI design style that makes interface elements look raised from or sunken into the background using dual shadows and monochromatic color palettes. It blends skeuomorphism’s depth with flat design’s minimalism.

Who created neumorphism?

Alexander Plyuto’s 2019 Dribbble banking app concept sparked the trend. Jason Kelly coined the term as a mix of “neo” and “skeuomorphism.” Michal Malewicz, CEO of Hype4, helped popularize it through his design writing.

What CSS properties are needed for neumorphism?

Three properties handle most of the work: box-shadow with two values (one light, one dark), background-color matching the page background, and a high border-radius. No special frameworks required.

Is neumorphism accessible?

Not by default. The low contrast between elements and background often fails WCAG minimum ratio requirements. Users with low vision or color blindness struggle to identify interactive components without added accent colors or stronger shadow intensity.

What is the difference between neumorphism and skeuomorphism?

Skeuomorphism recreates real-world objects with heavy textures and realistic detail. Neumorphism keeps the depth concept but strips away the realism, using only subtle shadows on a flat, single-color surface instead.

What is the difference between neumorphism and flat design?

Flat design uses bold color contrast with zero shadows or depth. Neumorphism uses the same base color for background and elements, relying on dual light and dark shadows to create a soft, extruded 3D effect.

Does Apple use neumorphism?

Apple borrowed neumorphic elements in macOS Big Sur (November 2020). App icons gained soft depth and translucency effects. But Apple applied the style selectively, avoiding the full monochromatic approach to keep accessibility intact.

What tools can I use to create neumorphic designs?

Figma, Adobe XD, and Sketch all support the dual-shadow stacking that neumorphism requires. Neumorphism.io generates ready-to-use CSS code. Figma is the fastest option for quick prototyping with real-time shadow previews.

When should I avoid using neumorphism?

Avoid it for complex apps with deep navigation, dense data tables, or strict accessibility requirements. E-commerce product grids and SaaS platforms with many interactive controls are bad fits because low contrast creates confusion at scale.

Can neumorphism work in dark mode?

Yes, but it’s harder to pull off. Dark mode neumorphism needs an off-black base (around #2E2E2E) with carefully tuned lighter and darker shadow values. Contrast problems get worse in dark mode, so extra accessibility testing is a must.

Conclusion

Understanding what is neumorphism comes down to recognizing its strengths and limits. The soft UI style delivers a clean, tactile interface when applied to the right project. But it’s not a universal solution.

Low contrast ratios, WCAG compliance gaps, and weak visual hierarchy make it a poor choice for complex or content-heavy products. Finance dashboards and music players with simple controls benefit from it. Dense SaaS interfaces and e-commerce grids don’t.

The CSS implementation is straightforward. A box-shadow with dual values, a matched background-color`, and rounded corners handle most of the heavy lifting.

Pick neumorphism when the component count is low and the design language calls for depth without clutter. Test accessibility early. And if your design system can’t support the monochromatic constraint, look at glassmorphism or material design instead.