Neumorphism Generator

Soft UI (Neumorphic) 효과를 밝고 어두운 shadow로 만들어요. Shape, distance, blur, intensity를 자유롭게 커스터마이징할 수 있어요.

작동 방식: 배경색을 선택하고 shadow distance, blur, intensity를 조정해요. Shape 타입을 선택하면 다양한 neumorphic 효과를 볼 수 있어요. 완성되면 CSS를 복사하면 돼요.

#e0e0e0
형태
5px
10px
50%
16px
200px
border-radius: 16px;
background: #e0e0e0;
box-shadow: 5px 5px 10px #9d9d9d,
-5px -5px 10px #e9e9e9;

Neumorphism이란?

Neumorphism (new + skeuomorphism)은 정교하게 만든 shadow로 부드러운, 돌출된 형태를 만드는 디자인 스타일이에요. 요소가 배경 표면에서 튀어나오거나 눌려 들어가 보여요. 플랫 디자인과 현실적인 shadow 효과를 결합하며, 배경색과 매칭된 밝은 shadow 하나와 어두운 shadow 하나를 사용해요.

Neumorphic Shadow의 원리

이 효과는 두 개의 box-shadow가 필요해요. 밝은 shadow (위-왼쪽 오프셋)와 어두운 shadow (아래-오른쪽 오프셋)에요. 두 shadow 모두 배경색에서 파생되는데 — 하나는 더 밝고, 하나는 더 어둬요. 요소와 부모 요소는 같은 배경색이어야 착시 효과가 작동해요. Distance와 blur를 조정해서 깊이감을 조절해요.

Neumorphism Shape 타입

Flat은 외부 shadow로 raised button 느낌을 만들어요. Concave는 미묘한 gradient로 표면이 안쪽으로 구부러진 것처럼 보여요. Convex는 둥글고 들어올려진 모양을 만들어요. Pressed는 inset shadow로 눌려진 버튼을 시뮬레이션해요. 각 shape 타입은 원하는 시각 효과를 위한 다른 CSS를 생성해요.

Neumorphism 디자인 팁

  • 항상 neutral 배경색을 사용해요 — 순백색이나 매우 채도 높은 색상은 효과를 깨뜨려요
  • Shadow distance와 blur를 균형있게 — 보통 1:2 비율이에요
  • 부드러운 intensity를 사용해서 harsh shadow를 피해요
  • 텍스트와 interactive 요소는 충분한 contrast를 확보해요
  • Neumorphism은 card, button, toggle에서 가장 잘 어울려요
  • 접근성을 고려해요 — 부드러운 edge는 일부 사용자에게 구분이 어려울 수 있어요