CSS 뉴모피즘 생성기

뉴모피즘("소프트 UI")은 요소에 배경과 같은 색을 주고 그림자를 둘 입히는 방식입니다. 빛에서 먼 쪽에는 더 어두운 그림자를, 빛 쪽에는 더 밝은 그림자를 두어, 요소가 페이지에서 튀어나왔거나 눌려 들어간 것처럼 보입니다. 이 생성기는 neumorphism.io와 같은 방식으로 기본 색에서 두 그림자 색을 계산하고, 어느 광원 방향에서든 평평, 오목, 볼록, 눌림 변형을 만들어 주며, 결과의 명암비가 너무 낮아 컨트롤로 쓰기 어려우면 경고합니다.

사용 방법

1. 기본 색을 고릅니다. 요소 뒤의 페이지도 같은 색이어야 합니다.
2. 크기, 모서리 둥글기, 그림자 거리, 블러, 강도를 정합니다.
3. 모양과 광원 방향을 고릅니다.
4. CSS를 복사합니다. 버튼이나 입력란에 쓰기 전에 가장자리 명암비 경고를 읽으세요.

계산식

어두운 색 = 채널 × (1 − 강도) · 밝은 색 = min(255, 채널 × (1 + 강도)) · box-shadow: d d 블러 어두운 색, −d −d 블러 밝은 색

d는 그림자 거리이며 부호는 광원 방향에 따라 달라집니다. 오목과 볼록 모양은 왼쪽 위 광원일 때 145° 방향으로 10% 더 어두운 색에서 7% 더 밝은 색(또는 반대)까지 그라데이션을 더하고, 다른 모서리 광원에서는 대칭으로 뒤집습니다. 눌림은 inset 그림자를 씁니다.

예시

#E0E0E0에 강도 15%이면 각 채널은 224 × 0.85 = 190.4 → #BEBEBE, 224 × 1.15 = 257.6 → #FFFFFF로 제한되어 box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff가 됩니다. 표면과 어두운 그림자의 가장자리 명암비는 1.4:1에 불과해, WCAG가 인터페이스 구성 요소에 요구하는 3:1에 크게 못 미칩니다.