뉴모피즘 생성기
배경색만 고르면 뉴모피즘 그림자 CSS를 바로 만들어 드려요.
볼록 · 20px · #e0e5ec
요소가 놓일 실제 배경색과 같게 설정하세요.
색상만 골라보기
그림자 거리와 흐림이 함께 커집니다.
기본은 볼록, 눌린 상태엔 오목.
💡 :active에 오목 코드를 넣으면 누르는 느낌을 줄 수 있어요.
설명
배경과 같은 색 위에 밝은 그림자와 어두운 그림자를 함께 넣어, 요소가 부드럽게 튀어나오거나(볼록) 눌린 것처럼(오목) 보이게 하는 뉴모피즘 CSS를 만들어 드립니다. 미리보기로 확인하고 코드를 그대로 복사해 붙여넣으면 끝입니다.
관련 도구
뉴모피즘(Neumorphism)은 배경색과 유사한 색조로 부드러운 그림자를 두 방향에서 적용해 오브젝트가 배경에서 살며시 솟아오른 것처럼 보이게 하는 UI 디자인 스타일입니다. 이 도구를 사용하면 색상·그림자 크기·볼록/오목을 조정하면서 뉴모피즘 버튼이나 카드에 필요한 CSS box-shadow 코드를 실시간으로 생성할 수 있습니다. 생성된 코드를 그대로 복사해 프로젝트에 붙여 넣으면 바로 적용됩니다.
사용 방법
먼저 배경 색상을 선택합니다. 뉴모피즘은 배경과 요소가 동일한 색이어야 효과가 자연스러우므로, 실제 프로젝트의 배경색을 그대로 입력하는 것이 핵심입니다. 다음으로 그림자 크기 슬라이더로 그림자의 거리(distance)와 흐림(blur) 정도를 조정합니다. 미리보기 박스에서 실시간으로 결과를 확인하며 원하는 형태가 나올 때 하단의 CSS 코드를 복사합니다. 볼록하게 튀어나온 형태와 눌린 형태(오목)는 모양 선택으로 전환할 수 있으니 용도에 맞게 조절하세요.
이럴 때 유용해요
버튼, 카드, 입력 필드, 아이콘 컨테이너 등 UI 요소에 입체감을 주고 싶을 때 활용할 수 있습니다. 특히 회색 계열 또는 파스텔 톤 배경에서 효과가 가장 뚜렷하게 나타납니다. React나 Vue 같은 프레임워크 프로젝트에서 인라인 스타일 또는 CSS 모듈에 그대로 붙여 쓸 수 있어 빠른 프로토타이핑에 유용합니다. 대시보드, 건강·명상 앱, 금융 앱처럼 차분하고 고급스러운 느낌이 필요한 프로젝트에서 자주 쓰입니다.
알아두면 좋은 점
뉴모피즘은 접근성(Accessibility) 측면에서 배경과 요소의 명도 대비가 낮아 저시력 사용자가 구분하기 어렵다는 단점이 있습니다. WCAG 2.1 기준(명도 대비 4.5:1 이상)을 충족하기 어려우므로, 주요 텍스트나 필수 입력 요소에는 단독으로 적용하지 않는 것이 좋습니다. 다크 배경에서는 그림자 색상 계산이 달라지므로 밝은 면(highlight)과 어두운 면(shadow)의 색상을 따로 조정해야 자연스러운 결과가 나옵니다. 그림자가 과하면 오히려 촌스러워 보일 수 있으니 distance와 blur 값을 작게 유지하는 것이 세련된 결과를 얻는 지름길입니다.
자주 묻는 질문
생성된 CSS를 그대로 복사해서 사용하면 되나요?
다크 모드에서도 뉴모피즘을 적용할 수 있나요?
border-radius를 어떻게 설정해야 예쁘게 나오나요?
Tailwind CSS 프로젝트에 적용하려면 어떻게 하나요?
뉴모피즘과 글래스모피즘의 차이는 무엇인가요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
뉴모피즘 생성기 사용법
이 도구는 배경 색상, 그림자 크기, 볼록/오목 세 가지 값만 조절하면 뉴모피즘(Neumorphism, Soft UI) 스타일의 CSS를 실시간으로 만들어 줍니다. 먼저 요소가 놓일 배경과 똑같은 색을 배경 색상으로 지정하는 것이 핵심입니다. 뉴모피즘은 버튼이나 카드가 배경과 같은 색이면서 그림자만으로 튀어나오거나 눌린 듯 보이게 하는 기법이라, 배경색이 다르면 입체 효과가 깨집니다. 이어서 그림자 크기로 그림자가 얼마나 벗어나고 부드럽게 번질지를 정하고, 볼록·오목으로 튀어나온 상태와 눌린 상태를 고른 뒤 하단의 코드를 복사해 붙여넣으면 됩니다.
계산 원리: 그림자 두 개로 만드는 입체감
뉴모피즘의 핵심은 하나의 요소에 box-shadow를 두 개 겹치는 것입니다. 오른쪽 아래 방향에는 배경보다 어두운 색, 왼쪽 위 방향에는 배경보다 밝은 색을 넣어 한쪽에서 빛이 드는 듯한 착시를 만듭니다. 이 도구는 입력한 배경 색상의 밝기를 일정 비율로 올리고 내려 두 그림자 색을 자동 계산합니다. 그림자 크기 값이 그림자의 x·y 오프셋이 되고, 흐림 반경(blur)은 그 크기의 약 2배로 잡아 부드럽게 번지게 합니다. 안쪽으로 눌린(concave/pressed) 스타일은 같은 그림자에 inset 키워드를 붙여 방향만 안으로 뒤집은 결과입니다.
| 조절 값 | 실제로 바뀌는 CSS |
|---|---|
| 배경 색상 | 요소 background + 두 그림자 색의 기준 |
| 그림자 크기 | 그림자 x·y 오프셋과 흐림 반경(크기의 약 2배) |
| 볼록/오목 | 그림자의 inset 유무(안으로 눌린 형태) |
활용 상황과 팁
토글 스위치, 재생·일시정지 버튼, 계산기 키패드, 카드형 대시보드처럼 배경과 톤을 맞춘 미니멀 UI에 잘 어울립니다. 팁 몇 가지: 배경은 순백(#ffffff)보다 #e0e0e0~#f0f0f0 같은 연한 회색이 양쪽 그림자가 다 보여 효과가 선명합니다. 거리는 요소 크기의 약 10% 안팎이 자연스럽고, 너무 크면 붕 뜬 느낌이 납니다. 볼록(raised)은 기본 상태, 오목(pressed)은 클릭·활성 상태에 배치하면 상호작용이 직관적입니다. 다만 뉴모피즘은 배경과 색이 같아 경계 대비가 낮으므로, 접근성이 중요한 버튼에는 테두리나 텍스트 대비를 따로 보강하는 편이 좋습니다.
자주 묻는 질문
그림자가 한쪽만 보이는데 왜 그런가요?
배경 색상을 순백이나 순검으로 지정하면 밝은 그림자 또는 어두운 그림자가 배경에 묻혀 안 보입니다. 두 그림자가 모두 드러나도록 연한 회색 계열을 쓰고, 요소를 감싼 실제 페이지 배경도 같은 색으로 맞추세요.
볼록과 오목은 어떻게 전환하나요?
동일한 그림자 값에서 inset 유무만 다릅니다. 이 도구에서 스타일을 오목으로 바꾸면 두 그림자 앞에 inset이 붙어 안쪽으로 파인 형태가 됩니다.
호버·클릭 효과도 만들 수 있나요?
볼록 코드를 기본 상태에, 오목 코드를 :active에 넣으면 누를 때 들어가는 애니메이션이 됩니다. transition: box-shadow 0.2s를 함께 주면 자연스럽습니다.
다크 모드에도 쓸 수 있나요?
가능합니다. 배경 색상만 어두운 회색(예: #2c2c2c)으로 바꾸면 밝은/어두운 그림자가 그 색을 기준으로 다시 계산되어 다크 톤 뉴모피즘 코드가 나옵니다.