멀티 레이어 박스 섀도우 생성기
여러 겹 그림자를 조합해 입체적인 CSS box-shadow를 만들어요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
box-shadow를 여러 겹 겹치면 단일 그림자보다 훨씬 부드럽고 입체적인 효과를 낼 수 있어요. 각 레이어의 위치, 번짐, 색상, 투명도를 따로 조절하면서 미리보기로 바로 확인하고, 완성된 CSS 코드를 그대로 복사해 프로젝트에 붙여넣을 수 있습니다. 모든 계산은 브라우저에서만 이뤄지며 서버로 전송되지 않아요.
사용 방법
- 부드러운 그림자·네온 글로우·레트로 3D 중 원하는 프리셋을 선택해 시작하세요.
- 레이어 목록에서 편집할 레이어를 고르고 X/Y 오프셋, 블러, 스프레드, 불투명도 슬라이더를 조정하세요.
- 색상 피커나 헥스 코드 입력으로 그림자 색을 바꾸고, 필요하면 안쪽 그림자(inset)를 켜세요.
- + 레이어 추가 버튼으로 겹을 더 쌓은 뒤, 완성된 CSS를 복사해 사용하세요.
자주 묻는 질문
- 레이어는 몇 개까지 추가할 수 있나요?
- 제한 없이 원하는 만큼 추가할 수 있어요. 다만 레이어가 1개만 남으면 더 이상 삭제할 수 없습니다.
- 생성된 CSS는 바로 사용해도 되나요?
- 네, box-shadow: ... 형태로 바로 복사되므로 CSS 파일이나 style 속성에 그대로 붙여넣으면 됩니다.
- 프리셋을 선택한 뒤 값을 수정하면 프리셋이 바뀌나요?
- 아니요, 프리셋은 시작점일 뿐이며 이후 슬라이더로 자유롭게 값을 수정해 나만의 그림자를 만들 수 있습니다.