🧊 뉴모피즘 그림자 생성기 | 두 그림자 코드 복사

표면색 (부모 배경과 같아야 합니다)

입체 방향

빛이 오는 방향

그림자 거리

블러

강도 (표면색을 흰색·검정과 섞는 비율)

모서리 반경

표면색과 같은 색 위에 밝은 그림자와 어두운 그림자를 하나씩 얹어 솟거나 눌린 느낌을 내는 뉴모피즘 코드를 만들어 줍니다. 거리와 블러, 강도, 빛의 방향을 넣으면 두 그림자의 HEX까지 계산해 보여 주고 바로 위 미리보기에서 확인할 수 있습니다.

밝은 색과 어두운 색은 표면색을 감마 인코딩된 sRGB 채널에서 흰색과 검정 쪽으로 입력한 강도만큼 선형 혼합해 만듭니다. 빛이 오는 방향에 따라 어두운 그림자는 반대쪽으로, 밝은 그림자는 빛 쪽으로 같은 거리만큼 밀립니다. 오목 모양은 두 그림자에 inset을 붙인 것입니다. box-shadow 값의 순서는 W3C CSS Backgrounds and Borders 를 따릅니다(2026년 10월 기준).

뉴모피즘은 표면과 부모 배경이 같은 색이어야 성립하므로 코드에 부모 배경 선언을 함께 넣어 둡니다. 거리·블러·강도의 권장값은 제시하지 않습니다. 또한 대비가 낮아 글자와 경계가 잘 안 보일 수 있으니 중요한 버튼에는 별도 대비 확보가 필요합니다.

자주 묻는 질문

배경색이 다르면 왜 입체감이 사라지나요?

뉴모피즘은 표면과 배경이 같은 색일 때 두 그림자만으로 솟음과 눌림을 흉내 내는 방식입니다. 배경이 다르면 그림자가 아니라 테두리처럼 보입니다.

권장 거리나 블러 값이 있나요?

이 도구는 정답 수치를 제시하지 않습니다. 같은 값도 표면색의 밝기와 요소 크기에 따라 전혀 다르게 보이므로 직접 눈으로 맞추는 편이 정확합니다.

밝은·어두운 색은 어떻게 계산되나요?

감마 인코딩된 sRGB 채널에서 표면색을 흰색과 검정 쪽으로 입력한 강도만큼 선형 혼합합니다. 결과에 두 색의 HEX를 그대로 보여 줍니다.

🧊CSS 뉴모피즘 그림자 코드 생성기

관련된 도구

카드 UI 그림자 깊이감 계산기

CSS text-shadow 코드 생성기

자주 묻는 질문

관련된 도구

카드 UI 그림자 깊이감 계산기

CSS text-shadow 코드 생성기

자주 묻는 질문

같은 카테고리 도구