실시간 미리보기 뉴모피즘 CSS 생성기

이 뉴모피즘 생성기가 하는 일

뉴모피즘(소프트 UI)은 요소가 뒤 배경에서 볼록 튀어나오거나 안으로 눌린 것처럼 보이게 하는 스타일로, 같은 배경색에서 약간 밝은 그림자와 약간 어두운 그림자 두 개를 사용합니다. 이 도구에서는 기본 색상을 고르고 요소 크기, 모서리 둥글기, 그림자 거리, 흐림, 강도를 조절한 뒤 평면·오목·볼록·눌림 모양을 선택할 수 있습니다. 실시간 미리보기가 같은 색 배경 위에 놓여 부드러운 그림자 효과가 제대로 보이며, 한 번 클릭하면 스타일시트에 바로 붙여넣을 수 있는 전체 CSS 규칙이 복사됩니다. 슬라이더를 움직이면 모든 것이 즉시 갱신됩니다.

밝은 그림자와 어두운 그림자가 계산되는 방법

이 효과는 기본 색상에서 만들어지는 두 개의 box-shadow 값에 달려 있습니다. 도구는 기본 색상의 빨강·초록·파랑 채널을 읽어 흰색 쪽으로 섞어 밝은 하이라이트를, 검은색 쪽으로 섞어 어두운 그림자를 만들며, 강도 슬라이더가 두 색이 얼마나 벌어지는지를 조절합니다. 밝은 그림자는 왼쪽 위로, 어두운 그림자는 오른쪽 아래로 배치되어 요소가 표면에서 솟아오른 것처럼 보입니다. 눌림 모양은 두 그림자를 모두 inset으로 넣어 안으로 들어간 것처럼 보이게 합니다. 오목·볼록 모양은 은은한 대각선 그라데이션 배경을 더하고, 평면·눌림은 단색을 유지합니다. 출력은 결정적이라 같은 설정은 항상 같은 CSS를 만듭니다.