CSS 뉴모피즘 생성기

CSS 뉴모피즘 생성기란?

CSS 뉴모피즘 생성기는 Soft-UI(뉴모피즘) 느낌을 만드는 무료 시각 도구로, 같은 색조의 어긋난 두 그림자를 써서 요소가 표면에서 솟아오르거나 눌려 들어간 것처럼 보이게 합니다. box-shadow 쌍을 일일이 손보지 않고도 그 은은하고 손에 잡힐 듯한 입체감을 원하는 UI 디자이너와 프런트엔드 개발자를 위해 만들어졌습니다. 선택기나 16진수 필드로 기준색을 정하고, 형태를 평면·오목·볼록 사이에서 전환하며, 거리(그림자가 얼마나 어긋나는지)·강도(밝음/어두움 대비의 세기)·블러(부드러움)·반경(모서리 둥글기)을 조정합니다. 도구는 기준색에서 더 밝은 하이라이트와 더 어두운 그림자를 도출해 합치고 — 오목·볼록 형태에서는 은은한 그라데이션을 더해 — 하나의 CSS 규칙으로 만들어, 어울리는 배경 위에 실시간으로 보여 주고 복사 가능한 코드로 출력합니다.

CSS 뉴모피즘 생성기 사용법

1. 스와치로 고르거나 #e0e5ec 같은 16진수 값을 입력해 표면 기준색을 선택합니다.
2. 형태를 고릅니다: 평면은 솟아오른 패널, 오목은 눌린 홈, 볼록은 둥글게 부푼 모양입니다.
3. 거리를 설정해 밝음·어두움 그림자를 더 바깥으로 밀어 더 깊은 돌출 효과를 냅니다.
4. 강도를 조정해 하이라이트/그림자 대비를 더 강하게 또는 은은하게 만듭니다.
5. 블러로 가장자리를 더 부드럽거나 또렷하게, 반경으로 모서리를 둥글게 조정합니다.
6. 실시간 미리보기를 확인한 뒤 생성된 뉴모피즘 CSS를 스타일시트에 복사합니다.

예시

색 #e0e5ec, 형태 평면, 거리 12, 강도 15, 블러 24, 반경 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

색 #e0e5ec, 형태 오목, 거리 8, 강도 15, 블러 16, 반경 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

색 #3a3f47, 형태 볼록, 거리 6, 강도 20, 블러 12, 반경 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

자주 묻는 질문

뉴모피즘이 무엇인가요?

뉴모피즘(Soft UI)은 같은 색조의 어긋난 두 box-shadow — 왼쪽 위에는 더 밝은 그림자, 오른쪽 아래에는 더 어두운 그림자 — 를 써서 요소가 단색 표면에서 솟아오르거나 눌려 들어간 것처럼 보이게 하는 스타일입니다. 이 도구는 기준색에서 두 그림자를 모두 도출하므로 언제나 표면과 어울립니다.

평면·오목·볼록의 차이는 무엇인가요?

평면은 표면을 단색 그대로 유지해 요소가 배경보다 솟아 보입니다. 오목은 왼쪽 위로 갈수록 어두워지는 은은한 그라데이션을 더해 안쪽으로 파인 것처럼 보입니다. 볼록은 그라데이션을 뒤집어 가운데가 둥글게 솟아 보이게 합니다. 밝음·어두움 그림자는 그대로이고 표면 채움만 바뀝니다.

거리·강도·블러·반경은 어떻게 작동하나요?

거리는 두 그림자의 픽셀 오프셋으로, 값이 클수록 요소가 표면에서 더 멀어집니다. 강도는 두 그림자색이 기준색보다 얼마나 더 밝고 어두운지를 조절합니다. 블러는 그림자 가장자리를 부드럽게 하고 반경은 모서리를 둥글게 합니다. 무엇을 바꾸든 CSS가 실시간으로 갱신됩니다.

배경에는 어떤 색을 써야 하나요?

뉴모피즘은 요소가 같은 기준색 표면 위에 있을 때만 제대로 보입니다 — 부모 요소나 페이지 배경에 같은 색을 적용하세요. 미리보기는 기준색을 배경으로 사용하므로 복사하기 전에 효과를 정확히 판단할 수 있습니다.

제 데이터가 어딘가로 업로드되나요?

아니요. 이 생성기는 전부 JavaScript로 브라우저 안에서 실행됩니다 — 색상과 설정이 서버로 전송되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.