ToolypetMCP
intermediate3 minutescss

Neumorphism UI Design

Create a neumorphic (soft UI) design with dual shadows, subtle gradients, and pressed states.

neumorphismsoft-uishadowmodern

이 레시피 활용 시점

Neumorphism creates a soft, extruded look popular in dashboard and control panel designs. It works best on light, monotone backgrounds with consistent lighting direction.

단계

1

Box Shadow Generator

이 도구 사용해보기

Create the extruded effect

프롬프트:Generate neumorphic shadows: light shadow -6px -6px 14px rgba(255,255,255,0.7) and dark shadow 6px 6px 14px rgba(0,0,0,0.15)
2

Box Shadow Generator

이 도구 사용해보기

Create the pressed state

프롬프트:Generate pressed/inset neumorphic shadows: inset -3px -3px 7px rgba(255,255,255,0.5) and inset 3px 3px 7px rgba(0,0,0,0.1)
3

Subtle background gradient

프롬프트:Generate a very subtle background gradient from #e8e8e8 to #f0f0f0 at 145 degrees for the neumorphic surface
4

Border Radius Generator

이 도구 사용해보기

Soft rounded corners

프롬프트:Generate 20px border-radius for rounded neumorphic elements

자주 묻는 질문

Is neumorphism accessible?

It has accessibility challenges — low contrast between element and background makes boundaries hard to see. Add subtle borders and ensure text contrast meets WCAG AA. Not recommended for primary UI.

When should I use neumorphism?

Best for decorative elements, music players, calculators, and control panels. Avoid for text-heavy UIs, forms, or e-commerce where clarity is essential.

관련 레시피