Question 1

What is neumorphism?

Accepted Answer

Neumorphism (soft UI) is a design style that uses two box shadows — one light and one dark — on a background of the same color as the element, creating the illusion of an extruded or inset shape. It simulates physical depth without gradients or borders.

Question 2

What CSS properties are used for neumorphism?

Accepted Answer

Neumorphism relies entirely on box-shadow with two values: a light shadow (offset to the top-left, white or a lightened version of the background) and a dark shadow (offset to the bottom-right, darkened version of the background). Border-radius controls the shape softness.

Question 3

What background color works best for neumorphism?

Accepted Answer

Neumorphism works best on mid-tone backgrounds — typically light greys like #e0e5ec or #f0f3f7. Pure white or black eliminate the shadow contrast effect. The element and background must share the same base color.

Question 4

What is the difference between flat, concave, convex, and pressed?

Accepted Answer

Flat is the default extruded look. Concave adds an inward gradient, making the surface appear dished. Convex adds an outward gradient, like a dome. Pressed reverses the shadow direction to simulate a button being pushed in.

Question 5

Can I use neumorphism in dark mode?

Accepted Answer

Yes. Use a dark base color (e.g. #2d2d3a) and adjust shadow colors accordingly — a slightly lighter shadow for the highlight and a very dark shadow for the depth. This generator supports any base color so you can dial in dark mode values.

Free Neumorphism CSS Generator

Related Tools

Frequently Asked Questions