CSS Multi-layer Box Shadow 생성기
로컬 처리CSS Multi-layer Box Shadow 생성기 — 입력한 내용을 어디에도 보내지 않고 내 폰·PC에서 바로 처리하는 무료 도구입니다.
사용 방법과 처리 기준
CSS Multi-layer Box Shadow 생성기 — 입력한 내용을 어디에도 보내지 않고 내 폰·PC에서 바로 처리하는 무료 도구입니다.
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
현재 제한
- 최대 입력 길이 100,000자
한 겹 그림자보다 자연스러운 입체감을 주는 다층 그림자를 만듭니다. 겹마다 거리·흐림은 늘고 투명도는 줄어 부드럽게 퍼집니다.
이 도구로 할 수 있는 일
- 겹 수 조절
- 겹을 늘릴수록 그림자가 더 부드러워집니다.
- 색 지정
- R, G, B나 HEX로 그림자 색을 정합니다.
CSS Multi-layer Box Shadow 생성기 사용 방법
- 1겹·퍼짐 정하기겹 수와 기본 거리(px)를 정합니다.
- 2색 정하기"0, 0, 0"처럼 RGB를 적습니다.
- 3CSS 복사카드·버튼 스타일에 붙입니다.
활용 예시
세 겹, 4px
입력: 3겹, 4px, 0, 0, 0
결과: box-shadow:
0 4px 8px rgba(0, 0, 0, 0.16),
0 8px 16px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.05);
이럴 때 유용해요
- 카드·모달에 자연스러운 입체감을 줄 때
- 디자인 시스템의 elevation 단계를 만들 때
자주 묻는 질문 (FAQ)
색 칸에 #000 같은 HEX를 넣어도 되나요?
됩니다. #000·#336699 같은 HEX는 RGB로 바꿔 넣고, "0, 0, 0"처럼 R, G, B를 적어도 됩니다. 그 밖의 값(red 등)은 틀린 CSS가 나오지 않도록 오류로 알려 줍니다.