CSS Visual Directory
Neumorphism
Two opposing shadows on a background of the same colour, making a shape look pressed out of the surface.
Edit Neumorphism
Change any value to see it update live.
About this entry
What it is
Two opposing shadows on a background of the same colour, making a shape look pressed out of the surface.
Soft dashboard controls and toggles, where contrast is not doing critical work.
Copy & use
How to copy and use neumorphism
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Soft dashboard controls and toggles, where contrast is not doing critical work.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Two shadows in opposite directions — one dark, one white — on a background matching the surface. The shape appears extruded from the page rather than placed on it.
background: #e8e3db- Must match the surface behind it, or the illusion collapses immediately.
8px 8px 16px #c9c4bd- The shaded side, darker than the background.
-8px -8px 16px #ffffff- The lit side, mirrored exactly and lighter than the background.
Making it yours
How to adjust neumorphism
The two offsets must mirror each other and the two colours must sit an equal step either side of the background. Break either symmetry and it stops reading as a single light source.
Worth knowing before you ship it
The style is close to unusable for accessibility: the control and its background are by definition the same colour, so edges fail contrast requirements. Keep it decorative and never the only cue that something is interactive.
Common questions
Using neumorphism
What is neumorphism?
Two opposing shadows on a background of the same colour, making a shape look pressed out of the surface. Soft dashboard controls and toggles, where contrast is not doing critical work.
Where do I put the neumorphism CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Soft dashboard controls and toggles, where contrast is not doing critical work. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will neumorphism work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise neumorphism after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing