그림자 유형과 흐림·거리를 고르면 여러 겹 box-shadow나 플랫·뉴모 코드를 만들고 미리볼 수 있습니다.
💡 다중 레이어 그림자 결과
레이어 구성: box-shadow: multiple layers
📊 적용 가이드
* Soft~Neon은 여러 겹을 쉼표로 이어 붙입니다. 플랫·뉴모는 바탕색·거리가 핵심이고, 뉴모는 부모 바탕색도 같게 맞추세요.
💡 box-shadow, 여러 겹·플랫·뉴모까지
버튼이나 카드에 입체감을 줄 때 box-shadow를 자주 씁니다. 한 줄만 넣으면 경계가 뭉개져 보이기도 해서, Soft·Deep처럼 여러 겹을 겹치거나, 플랫·뉴모피즘처럼 바탕색에 맞춘 그림자를 쓰기도 합니다. 유형만 고르면 코드와 미리보기가 같이 나옵니다.
Soft·Deep·Sharp·Neon은 흐림·투명도(%)로 여러 겹 비율을 잡고, 플랫·뉴모는 바탕 HEX·거리·투명도로 한두 겹을 만듭니다. 뉴모는 inset을 켜면 눌린 버튼·오목한 패널용으로 바뀝니다.
📌 한 겹보다 여러 겹이 나은 이유
실제 빛 아래 그림자는 가까운 쪽은 진하고, 멀수록 옅고 넓게 퍼집니다. Soft·Neon은 3겹, Deep은 4겹으로 그 느낌을 나눕니다. Sharp는 번짐을 줄여 윤곽을 또렷하게 받칩니다.
🎨 유형별 쓰기 좋은 곳
리스트 카드는 Soft, 모달·드롭다운은 Deep, 다크모드 포인트는 Neon, 경계가 분명한 UI는 Sharp가 무난합니다. 같은 톤 바탕에 눌린 느낌이면 뉴모, 아래쪽만 받치면 플랫을 쓰면 됩니다. 뉴모 박스를 쓸 때는 부모 바탕색도 같은 HEX로 맞추세요.
🧭 결과를 쓸 때
복사한 코드를 카드·버튼 클래스에 붙이면 됩니다. 그림자를 페이지 전체에 수백 개씩 넣으면 저사양에서 스크롤이 무거워질 수 있으니, 메인 카드·모달처럼 강조가 필요한 곳에만 쓰는 편이 안전합니다. Soft가 너무 약하면 투명도를 조금 올리고, 너무 진하면 Blur보다 Opacity를 먼저 낮추는 편이 형태가 덜 뭉개집니다.
🚨 이용 시 주의사항
일반적인 브라우저에서 쓰는 CSS box-shadow 문법입니다. 레이어가 많을수록 렌더링 부담이 커질 수 있습니다. 미리보기와 실제 배경색이 다르면 투명도를 조금 낮춰 맞춰 보세요. 참고용 생성 결과이니 디자인 가이드에 맞게 수치만 다듬어 쓰면 됩니다.
