What Is Neumorphism? Soft UI Explained with Free React Code
Discover what neumorphism is, how Soft UI works, and how to build free React neumorphic components with Empire UI's ready-made library.
What Is Neumorphism?
Neumorphism (also written *neomorphism*) is a UI design trend that emerged around 2020, combining the realism of skeuomorphism with the clean, minimal palette of flat design. The result is a visual style where elements appear to be extruded from — or pressed into — the background, as if the entire interface were molded from a single slab of soft clay or rubber. The name is a portmanteau of *new* and *skeuomorphism*, and it quickly became one of the most searched design aesthetics on the internet.
The signature look comes from a pair of carefully offset box shadows: one light shadow on the top-left edge and one darker shadow on the bottom-right edge, both using colors derived from the background itself. Because no hard borders or contrasting fills are introduced, elements appear to grow organically from the surface. This technique is sometimes called Soft UI, and the two terms are used interchangeably across design communities.
Where glassmorphism achieves depth through frosted-glass transparency, neumorphism achieves depth through light simulation alone — no transparency required. That makes it a particularly approachable technique for developers who want a tactile, premium feel without managing opacity layers or backdrop filters.
The Core CSS Technique Behind Soft UI
Every neumorphic element relies on a dual box-shadow rule. The two shadows must be offset in opposite directions and their colors must be a tinted and shaded variant of the background color — typically 10–15% lighter and darker respectively. If the background is #e0e5ec, a good light shadow might be #ffffff and a good dark shadow might be #a3b1c6.
Here is the essential CSS pattern that powers the entire aesthetic:
``css
/* Neumorphism base card */
.neu-card {
background: #e0e5ec;
border-radius: 16px;
box-shadow:
8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
padding: 2rem;
}
/* Pressed / active state */
.neu-card:active {
box-shadow:
inset 4px 4px 10px #a3b1c6,
inset -4px -4px 10px #ffffff;
}
`
The inset` variant creates the pressed-in effect used for active buttons, toggle switches, and text inputs — giving users immediate visual feedback without a single line of JavaScript.
Choosing the right border-radius is equally important. Soft UI looks best with large, rounded corners (12 px to 24 px) because sharp corners break the tactile illusion. Very small components like icon buttons often use border-radius: 50% to produce a soft circular pill shape.
Building a Neumorphic Button in React
Empire UI ships a full neumorphism style token baked into its component system, so you get accessible, animated Soft UI components without hand-rolling every shadow. The library is completely free, open-source, and installable in seconds — no paid tiers, no locked components.
Below is a standalone React example that demonstrates a neumorphic button with a pressed state using only Tailwind-compatible inline styles and a useState hook:
``tsx
import { useState } from 'react';
const bg = '#e0e5ec';
const shadowOut = '8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff';
const shadowIn = 'inset 4px 4px 10px #a3b1c6, inset -4px -4px 10px #ffffff';
export function NeuButton({ label = 'Click me' }) {
const [pressed, setPressed] = useState(false);
return (
<button
onMouseDown={() => setPressed(true)}
onMouseUp={() => setPressed(false)}
onMouseLeave={()=> setPressed(false)}
style={{
background: bg,
borderRadius: '12px',
border: 'none',
padding: '0.75rem 1.5rem',
fontSize: '1rem',
color: '#4a5568',
cursor: 'pointer',
boxShadow: pressed ? shadowIn : shadowOut,
transition: 'box-shadow 0.15s ease',
}}
>
{label}
</button>
);
}
`
Drop this component anywhere in your React app and you have an instantly recognizable Soft UI interaction. The transition` property keeps the press animation smooth at 150 ms — fast enough to feel snappy, slow enough to be visible.
With Empire UI you can go further with zero extra effort. The library's neumorphism preset wraps this pattern into composable primitives like <NeuCard>, <NeuInput>, and <NeuToggle> that all share a single theme token, so changing the background color of your palette automatically recalculates every shadow across your entire interface. Explore the full component catalogue and live style switcher at /templates.
Accessibility Considerations for Neumorphism
The most common critique of neumorphism is its low contrast. Because the shadows are derived from the background color rather than a contrasting fill, the boundary between an element and its parent surface can be nearly invisible to users with low vision or those viewing screens in bright sunlight. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for text and 3:1 for UI components — a standard that pure neumorphism often fails out of the box.
The practical solution is to augment shadows with subtle color fills or to use neumorphism selectively for decorative containers while ensuring interactive elements (buttons, links, form inputs) carry sufficient color contrast. Empire UI's neumorphism components are built with this hybrid approach: the outer card shells use the pure shadow technique, while text labels and icons always meet WCAG contrast thresholds.
Another useful technique is pairing neumorphic decoration with focus-visible outlines. Keyboard and screen-reader users rely on visible focus indicators, and the soft monochromatic palette makes default browser outlines nearly invisible. Adding a 2px solid focus ring in a contrasting accent color (e.g., a blue or purple) resolves this without visually disturbing the soft aesthetic. The Empire UI component library handles this automatically through its focus-ring utility class.
Neumorphism vs. Glassmorphism: Which Should You Use?
Both neumorphism and glassmorphism are popular choices for premium, modern interfaces, but they solve different design problems. Neumorphism works best on light, monochromatic backgrounds where the shadow gradient can breathe. It projects a tactile, physical quality that suits dashboards, settings panels, smart-home UIs, and health or finance apps. Glassmorphism thrives on dark or gradient backgrounds where frosted-glass cards can catch color from the scene behind them.
If your brand palette is light and desaturated, neumorphism will feel more cohesive. If your brand features rich gradients, photography, or dark mode as a primary experience, glassmorphism is typically the stronger choice. Many modern products mix both techniques — neumorphic cards inside a glassmorphic modal, for example — to create layered visual hierarchy. Empire UI supports 40 distinct visual styles, including both, so you can switch and compare them in real time on the /templates page without touching a single line of code.
For a direct side-by-side comparison of strengths, contrast behavior, and ideal use cases, read our dedicated guide on glassmorphism vs. neumorphism in the Empire UI blog. You can also generate custom glassmorphism CSS instantly with the free tool at /tools.
Free Neumorphism Components with Empire UI
Empire UI is the world's largest free React UI library, and neumorphism is one of its 40 fully supported visual styles. Every component in the library — from animated tabs and bento grids to custom cursors and scroll containers — can be rendered in the neumorphism style with a single prop or theme token change. There are no paywalls, no sign-up requirements, and no component locked behind a Pro tier.
Getting started takes under two minutes. Install the package, wrap your app in the Empire UI provider, set your style to neumorphism, and every component inherits the correct shadow tokens automatically. You can also browse the MCP server integration at /mcp to generate neumorphic components directly from natural-language prompts inside your AI coding assistant — a workflow that compresses hours of shadow-tuning into a single sentence.
Beyond components, Empire UI offers an interactive custom cursor library at /cursors with neumorphic cursor variants that match your Soft UI interface end-to-end. Consistent visual language across cursors, scrollbars, and components is what separates a polished product from a patchwork of styles. Start building for free today — your first neumorphic interface is minutes away.
FAQ
Neumorphism is a visual design style where interface elements appear to be extruded from or pressed into the background surface using dual, offset box shadows. It combines flat design's minimal color palette with skeuomorphism's sense of physical depth, producing a soft, tactile aesthetic often called Soft UI.
Flat design removes all shadows and gradients to create a completely 2D surface, while neumorphism reintroduces depth through carefully crafted light and dark shadows derived from the background color. The result is an interface that feels three-dimensional and tactile without using photographic textures or high-contrast fills.
Pure neumorphism can struggle with WCAG contrast requirements because its low-contrast shadows may be invisible to users with low vision. The recommended fix is to combine soft shadows with sufficient color contrast on interactive elements, focus-visible outlines, and tested color ratios — all of which Empire UI handles automatically in its neumorphism component preset.
Yes, but it requires recalculating your shadow palette to use dark-tinted and dark-shaded variants of your dark background color instead of light ones. A common dark-mode neumorphism background is around #1e2130, with shadows toward #13161f and #292e45. Empire UI's theme tokens handle this automatically when you toggle dark mode.
The entire effect is achieved with the CSS box-shadow property using two values: a positive offset with a dark shadow and a negative offset with a light shadow, both derived from the background color. Adding the inset keyword to both shadows creates the pressed-in state used for active buttons and focused inputs.