← Back to Home

Soft. Tactile. Elegant.

Neumorphism creates a subtle 3D effect through soft shadows and highlights, making elements appear to extrude from or indent into the background.

Feel the Depth

Design Principles

◯

Soft Shadows

Dual shadows create a gentle embossed effect that mimics physical objects rising from the surface.

◐

Subtle Depth

Elements appear to float slightly above or sink into the background through careful use of light and shadow.

◑

Monochromatic

Uses variations of a single color to maintain the illusion of depth without breaking the visual harmony.

Touch & Feel

Neumorphism brings back skeuomorphism with a modern twist. The design feels tactile and inviting, encouraging users to interact with elements that seem almost touchable.

SOFT UI

Create Soft Interfaces

Get Started

AI 프롬프트 예제

Claude/Cursor를 사용하여 Neumorphism 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • 부드러운 양각/음각 효과 (dual shadows)
  • 단색 배경 또는 단색 계열 색상
  • 밝은 쉐도우와 어두운 쉐도우 조합
  • 배경과 요소의 색상이 유사해야 함
  • 둥근 모서리 (border-radius)
  • 미니멀하고 깔끔한 디자인

제약조건

  • 접근성 고려 (충분한 대비 유지)
  • 반응형 디자인 필수
  • 과도한 사용 지양 (가독성 저하)

예상 결과

  • 부드럽고 입체적인 UI
  • 터치 가능해 보이는 요소들
  • 은은한 깊이감
  • 세련되고 모던한 느낌
  • 일관된 색상 팔레트
  • 편안하고 부드러운 시각 경험

프롬프트 템플릿

Neumorphism 스타일의 버튼 컴포넌트를 만들어줘.

요구사항:
- 부드러운 양각 효과 (dual shadows 사용)
- 밝은 쉐도우: -8px -8px 16px rgba(255,255,255,0.8)
- 어두운 쉐도우: 8px 8px 16px rgba(0,0,0,0.1)
- 배경색과 동일한 계열의 색상 사용
- 둥근 모서리 (border-radius: 20px 이상)
- 음각 효과 (pressed state)도 구현

스타일 가이드:
- background: #e0e5ec (배경색과 유사)
- box-shadow:
  -8px -8px 16px rgba(255,255,255,0.8),
  8px 8px 16px rgba(0,0,0,0.1)
- border-radius: 20px
- pressed state: inset shadows

디자인:
- 버튼 기본 상태: 양각 (raised)
- 버튼 클릭/active 상태: 음각 (pressed)
- 부드러운 전환 애니메이션

반응형 디자인 필수, 접근성 고려해줘.