뉴모피즘 생성기
기준색과 light/dark shadow를 계산해 flat·concave·convex neumorphism CSS를 만듭니다.
사용 방법
- 기준색·shadow 색, mode와 geometry를 조절합니다.
핵심 기능과 처리 범위
shadow angle·distance·blur·radius와 mode를 이용해 서로 반대 방향 두 shadow와 mode별 background gradient를 구성합니다.
처리 원리
angle에서 cos/sin으로 offset을 구하고 base를 white/black 방향으로 mix해 두 shadow color를 계산합니다.
예시
flat mode는 단색 background와 밝고 어두운 두 반대 그림자를 사용합니다.
이럴 때 유용합니다
- soft UI control·card의 neumorphic prototype을 만들 때
사용 전 참고
- 실제 접근성에서는 낮은 경계 대비가 문제가 될 수 있어 interaction state와 focus outline을 별도로 설계해야 합니다.
자주 묻는 질문
dark/light shadow를 직접 모두 입력하나요?
dark 쪽에는 secondary 색을 쓰고 light 쪽은 base와 white를 혼합해 자동 계산합니다.