Neumorphism
Also called soft UI or neomorphism
A soft UI style where buttons and cards look pushed out of, or pressed into, a surface of the same color, using light and dark shadows.
import { useState } from 'react';
import { Toggle } from '@base-ui/react/toggle';
// Raised: lit from the top left, so a light shadow there and a dark one below.
const RAISED =
'shadow-[8px_8px_16px_#c5c6cc,-8px_-8px_16px_#fff] inset-shadow-[0_0_0_#c5c6cc,0_0_0_#fff]';
// Pressed: the same shadows turned inward, so it sinks into the surface.
const SUNK =
'data-pressed:shadow-[0_0_0_#c5c6cc,0_0_0_#fff] data-pressed:inset-shadow-[6px_6px_12px_#c5c6cc,-6px_-6px_12px_#fff]';
export function PlayButton() {
const [playing, setPlaying] = useState(false);
return (
<div className='grid place-items-center bg-[#e6e7ee] p-12'>
<Toggle
aria-label='Play'
pressed={playing}
onPressedChange={setPlaying}
className={`grid size-20 place-items-center rounded-full bg-[#e6e7ee] text-slate-600 transition-shadow duration-150 ${RAISED} ${SUNK} focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600`}
>
<svg
viewBox='0 0 24 24'
fill='currentColor'
aria-hidden
className='size-7'
>
<path d={playing ? 'M7 5h4v14H7zM13 5h4v14h-4z' : 'M8 5v14l11-7z'} />
</svg>
</Toggle>
</div>
);
}Restyle the media controls in a neumorphic style on a #e6e7ee background: round buttons in the same color with box-shadow: 8px 8px 16px #c5c6cc, -8px -8px 16px #ffffff, switching to matching inset shadows over 150ms while pressed. Keep icons at 4.5:1 contrast, and add a visible focus ring for keyboard users.
Paste into Layerwise or any AI coding tool.
What is Neumorphism?
Neumorphism, short for new skeuomorphism, shapes controls out of the background itself. Each element has the same color as the surface and two shadows: a light one on the top left and a dark one on the bottom right, as if lit from one corner. Pressed states switch to inset shadows, so the control looks sunk into the surface.
It became popular on Dribbble around 2020 for calculators, music players, and smart home dashboards. It suits small, playful interfaces with a few large controls.
The style has real accessibility problems. Buttons have almost no contrast with the background, and pressed and unpressed states can look alike. If you use it, add clear icons or labels, keep text at 4.5:1 contrast, and show keyboard focus with a visible ring.
Often confused with
- Claymorphism
- Claymorphism uses colorful, puffy shapes that float above the page. Neumorphism keeps every element the same color as the surface.
- Skeuomorphism
- Skeuomorphism imitates real materials and objects such as metal, leather, and paper. Neumorphism borrows only soft lighting and stays a single flat color.
Related terms
All termsClaymorphism
A playful UI style with puffy, rounded shapes that look like soft clay, made with large radii and layered inner and outer shadows.
Skeuomorphism
A design style where digital controls imitate real objects and materials, such as metal knobs, leather, paper, and physical switches.
Drop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.