About CSS Neumorphism

Generate soft-UI box-shadow combinations — raised, inset, and flat modes. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Build pressed-button effects for form controls
• Experiment with soft-UI card surfaces
• Generate consistent dual-shadow values for a design system
• Experiment with neumorphic toggle and radio states before implementing

Tips

• Needs a mid-tone background (not pure white or black)
• Use light shadow + dark shadow of the same size on opposite sides
• Inset mode creates the 'pressed' look

Fun Facts

• The term 'neumorphism' was coined by Alexander Plyuto in a 2019 Dribbble post — it went viral overnight.
• Neumorphism has serious accessibility problems — the subtle shadows provide insufficient contrast for users with low vision, which is why it rarely appears in production apps.
• Neumorphism is essentially a revival of skeuomorphism (mimicking real-world materials) but using only light and shadow instead of textures and gradients.

FAQ

What's the trick behind neumorphism?

Two box-shadows: a light one offset in one direction, a dark one offset the opposite direction. This simulates soft edges on the element's surface color.

Does neumorphism work on any background color?

Only backgrounds close to the element's color — the effect relies on subtle variations. Pure white or pure black backgrounds break the illusion.

Is it accessible?

Neumorphism has notoriously low contrast. Use the tool's contrast check and consider a subtle border for focus states. Buttons often need a fallback high-contrast style.

Raised, inset, or flat — when to use which?

Raised for primary buttons/cards, inset for pressed states and input fields, flat for labels and disabled elements.