LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS 다중 레이어 Box Shadow 생성기

자체 기획 도구찾는 도구가 없나요?

한 세트의 컨트롤로 레이어형 box-shadow 디자인

오프셋, 블러, 확산, 색상, 레이어 수를 설정하고 실시간 미리보기를 확인한 뒤, 디자이너들이 실제 입체감을 위해 그림자를 겹겹이 쌓는 방식으로 만들어진 다중 레이어 box-shadow 선언을 복사하세요. 모든 렌더링은 사용자의 브라우저에서 이루어집니다.

출력
box-shadow:
  0px 4px 6px -1px rgba(23, 33, 28, 0.3),
  0px 8px 12px -2px rgba(23, 33, 28, 0.26),
  0px 12px 18px -2px rgba(23, 33, 28, 0.22),
  0px 16px 24px -3px rgba(23, 33, 28, 0.18),
  0px 20px 30px -4px rgba(23, 33, 28, 0.14);

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

box-shadow 레이어 하나만으로는 평평한 안개처럼 보이기 쉽습니다. 진짜 입체감은 요소에 가까워질수록 작아지고 옅어지는 여러 레이어를 쌓아 주변광이 감쇠하는 방식을 흉내 낼 때 나옵니다. 이 도구는 오프셋, 블러, 확산, 색상 컨트롤 한 세트와 레이어 수를 받아, 점점 더 촘촘하고 진해지는 레이어를 그만큼 자동으로 만들어 내므로 각 레이어를 일일이 손으로 조정하지 않고도 설득력 있는 겹겹 그림자를 얻을 수 있습니다.

사용 방법

  1. 생성할 레이어 수를 선택합니다.
  2. 기본 레이어의 오프셋, 블러, 확산, 색상, 불투명도를 설정합니다.
  3. 생성된 다중 레이어 box-shadow 선언을 복사합니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

무언가 업로드되나요?
아니요. 미리보기는 브라우저가 그리는 CSS 그림자이며, 선언 코드는 페이지 안에서 조합됩니다.
각 레이어는 어떻게 계산되나요?
각 레이어는 요소에 가까워질수록 오프셋, 블러, 확산을 줄이고 불투명도를 높입니다. 이는 직접 만든 입체감 시스템에서도 흔히 쓰이는 축소·감쇠 패턴과 같습니다.
레이어 수는 왜 제한되나요?
5~6개를 넘어가면 시각적 차이는 거의 없어지는 반면 CSS는 계속 늘어나므로, 결과를 읽고 붙여넣기 쉽게 유지하기 위해 컨트롤을 제한했습니다.

전체 도구로 돌아가기