실시간 미리보기 뉴모피즘 CSS 생성기
기본 색상을 흰색·검은색 쪽으로 섞은 두 box-shadow로 만드는 뉴모피즘 — 평면·오목·볼록·눌림 중 모양을 고르세요.
뉴모피즘 CSS 생성기
두 그림자가 기본 색상에서 얼마나 멀어지는지입니다. 0이면 평평하고, 1이면 가장 어두운 그늘과 가장 밝은 하이라이트가 됩니다.
미리보기
.neumorphic {
width: 200px;
height: 200px;
border-radius: 50px;
background: rgb(224, 224, 224);
box-shadow: 20px 20px 60px rgb(190, 190, 190), -20px -20px 60px rgb(229, 229, 229);
}결과 7줄, 191자이 뉴모피즘 생성기가 하는 일
뉴모피즘(소프트 UI)은 요소가 뒤 배경에서 볼록 튀어나오거나 안으로 눌린 것처럼 보이게 하는 스타일로, 같은 배경색에서 약간 밝은 그림자와 약간 어두운 그림자 두 개를 사용합니다. 이 도구에서는 기본 색상을 고르고 요소 크기, 모서리 둥글기, 그림자 거리, 흐림, 강도를 조절한 뒤 평면·오목·볼록·눌림 모양을 선택할 수 있습니다. 실시간 미리보기가 같은 색 배경 위에 놓여 부드러운 그림자 효과가 제대로 보이며, 한 번 클릭하면 스타일시트에 바로 붙여넣을 수 있는 전체 CSS 규칙이 복사됩니다. 슬라이더를 움직이면 모든 것이 즉시 갱신됩니다.
밝은 그림자와 어두운 그림자가 계산되는 방법
이 효과는 기본 색상에서 만들어지는 두 개의 box-shadow 값에 달려 있습니다. 도구는 기본 색상의 빨강·초록·파랑 채널을 읽어 흰색 쪽으로 섞어 밝은 하이라이트를, 검은색 쪽으로 섞어 어두운 그림자를 만들며, 강도 슬라이더가 두 색이 얼마나 벌어지는지를 조절합니다. 밝은 그림자는 왼쪽 위로, 어두운 그림자는 오른쪽 아래로 배치되어 요소가 표면에서 솟아오른 것처럼 보입니다. 눌림 모양은 두 그림자를 모두 inset으로 넣어 안으로 들어간 것처럼 보이게 합니다. 오목·볼록 모양은 은은한 대각선 그라데이션 배경을 더하고, 평면·눌림은 단색을 유지합니다. 출력에 무작위 요소가 없어 같은 설정은 항상 같은 CSS를 만듭니다.
자주 묻는 질문
미리보기 배경이 왜 요소 색상과 같나요?
뉴모피즘은 요소와 그 컨테이너가 같은 배경색을 공유할 때만 작동합니다. 효과가 그 한 색의 밝은 그림자와 어두운 그림자로만 만들어지기 때문입니다. 미리보기는 일부러 기본 색상을 배경으로 사용해 코드를 복사하기 전에 실제 소프트 UI 모습을 보여 줍니다.
평면·오목·볼록·눌림의 차이는 무엇인가요?
평면은 표면을 단색으로 유지하며 솟아오른 형태입니다. 오목과 볼록은 은은한 대각선 그라데이션을 더해 윗면이 안으로 파이거나 바깥으로 볼록해 보입니다. 눌림은 두 그림자를 모두 inset으로 넣어 요소가 표면에서 튀어나오는 대신 안으로 눌린 것처럼 보이게 합니다.