본문으로 건너뛰기
작업 데이터는 서버에 저장하지 않고, 내 브라우저에서 처리합니다.
tools
CSS box-shadow 그림자 생성기

CSS box-shadow 그림자 생성기

여러 그림자 레이어의 위치, 흐림, 확산, 색상, 투명도와 inset을 조절해 CSS box-shadow 코드를 만듭니다.

집중모드
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
레이어 1
0px
-100px100px
8px
-100px100px
24px
0px200px
0px
-100px100px
0.20

주요 기능

  • offset-x·offset-y -100~100px, blur 0~200px, spread -100~100px를 조절합니다.
  • HEX 색상과 0~1 alpha를 rgba() 값으로 변환합니다.
  • 바깥 그림자와 inset 안쪽 그림자를 레이어별로 설정합니다.
  • 레이어를 추가·삭제하고 쉼표로 결합된 box-shadow CSS를 미리 보고 복사합니다.

사용 방법

  1. 첫 레이어의 위치, 흐림, 확산과 색상을 조절합니다.
  2. 필요하면 inset을 켜거나 그림자 레이어를 더합니다.
  3. 미리보기를 확인하고 생성된 CSS 선언을 복사합니다.

활용 예시

  • 카드와 모달 그림자 설계

    미리보기를 보며 위치, 흐림, 확산과 투명도를 조절해 UI 요소에 맞는 CSS를 만들 수 있습니다.

  • 다중 그림자로 깊이 표현

    여러 바깥 그림자와 inset 레이어를 결합해 한 줄의 box-shadow 선언으로 복사할 수 있습니다.

개인정보 보호

그림자 설정과 CSS 생성은 브라우저에서 처리됩니다.

자주 묻는 질문

그림자를 여러 개 겹칠 수 있나요?
네. 레이어를 추가하면 각 설정이 쉼표로 결합된 하나의 box-shadow 선언으로 생성됩니다.
안쪽 그림자도 만들 수 있나요?
네. 각 레이어에서 inset을 켜 바깥 그림자와 별도로 안쪽 그림자를 구성할 수 있습니다.

관련 도구