Neumorphism

Use paired light and dark shadows to suggest surfaces raised from a similar background.

Live preview Try the effect

DESIGN SYSTEM

Good design
makes content clearer.

Focus on content, hierarchy and thoughtful details.

Explore design

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Use paired light and dark shadows to suggest surfaces raised from a similar background. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Small decorative controls where sufficient contrast can be maintained.

Related concepts

Unlike ordinary shadows, neumorphism combines matching surfaces and opposing highlights. Do not rely on shadows alone for state.

Describe this effect

Output language

Use subtle opposing light and dark shadows on a matching surface, while adding clear borders and focus states for accessibility.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.