적용했더니 그림자가 안 보여요.

뉴모피즘은 요소와 '부모 배경색이 같을 때'만 자연스럽게 보입니다. 흰 배경 위에 밝은 회색 카드를 두면 밝은 쪽 그림자가 묻힙니다. 부모 컨테이너 배경도 기준 색과 동일하게 맞춰 주세요.

볼록·오목·평면은 어떤 차이인가요?

평면은 표면색이 단색이고 바깥으로 뜬 느낌, 볼록은 표면에 밝은→어두운 그라디언트를 넣어 부풀어 오른 느낌, 오목은 그라디언트를 뒤집어 안으로 눌린 느낌을 줍니다. 그림자 방향은 세 형태 모두 동일합니다.

밝은·어두운 색은 기준 색을 흰색·검정과 섞어 근사 계산한 값이라 도구마다 미세하게 다를 수 있어 참고용입니다. 필요하면 복사한 뒤 rgb 값을 직접 미세 조정하세요. 계산은 모두 브라우저 안에서 처리됩니다.

기준 색에서 이중 그림자로 볼록·오목·평면 소프트 UI CSS를 생성·복사

도구를 불러오는 중…

🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.

하나의 기준 색에서 밝은 그림자와 어두운 그림자를 동시에 계산해 부드럽게 눌린 듯한 소프트 UI(뉴모피즘) 스타일을 만들어 줍니다. 크기·둥글기·그림자 거리·흐림·명암 강도를 조절하고 볼록/오목/평면 형태를 골라 실시간 미리보기와 함께 CSS를 복사할 수 있습니다.

적용했더니 그림자가 안 보여요.: 뉴모피즘은 요소와 '부모 배경색이 같을 때'만 자연스럽게 보입니다. 흰 배경 위에 밝은 회색 카드를 두면 밝은 쪽 그림자가 묻힙니다. 부모 컨테이너 배경도 기준 색과 동일하게 맞춰 주세요.
볼록·오목·평면은 어떤 차이인가요?: 평면은 표면색이 단색이고 바깥으로 뜬 느낌, 볼록은 표면에 밝은→어두운 그라디언트를 넣어 부풀어 오른 느낌, 오목은 그라디언트를 뒤집어 안으로 눌린 느낌을 줍니다. 그림자 방향은 세 형태 모두 동일합니다.
그림자 색이 실제 디자인 도구와 다를 수 있나요?: 밝은·어두운 색은 기준 색을 흰색·검정과 섞어 근사 계산한 값이라 도구마다 미세하게 다를 수 있어 참고용입니다. 필요하면 복사한 뒤 rgb 값을 직접 미세 조정하세요. 계산은 모두 브라우저 안에서 처리됩니다.