다플 도구 가이드

Box Shadow 생성기 사용법과 활용 방법

기본 그림자 레이어를 선택하고 미리보기에 사용할 요소와 배경을 확인하세요. 가로·세로 위치, 흐림, 확산, 색상, inset과 추가 레이어를 조절하세요. 미리보기와 생성된 box-shadow 선언을 확인해 CSS 코드로 복사하세요.

Box Shadow 생성기가 필요한 경우

슬라이더로 box-shadow 값을 시각적으로 만드세요. 여러 레이어 추가, 실시간 미리보기, CSS 코드 바로 복사.

필요한 입력값을 준비한 다음 화면의 옵션을 목적에 맞게 설정하고 결과를 확인합니다. 중요한 작업에는 원본을 보관하고 결과를 한 번 더 검토하세요.

box shadow, 박스 쉐도우, CSS 그림자 관련 작업에 활용할 수 있습니다. 브라우저와 입력 조건에 따라 결과가 달라질 수 있으므로 실제 사용 목적에 맞는지 확인하세요.

여러 개의 그림자를 겹쳐 만들 수 있나요?

그림자 레이어를 추가해 서로 다른 위치, 흐림, 확산과 색상을 한 요소에 겹칠 수 있습니다. CSS에서는 앞에 작성된 그림자가 위에 그려지므로 레이어 순서를 바꾸면 겹침과 광원 인상이 달라집니다.

안쪽 그림자도 만들 수 있나요?

레이어의 inset 옵션을 선택하면 요소 안쪽으로 표현되는 그림자를 만들 수 있습니다. inset은 요소 테두리 안쪽에 렌더링되며 배경색과 그림자색의 대비에 따라 깊이 표현이 달라집니다.

만든 그림자를 CSS에 어떻게 적용하나요?

미리보기에서 모양을 확인한 뒤 생성된 `box-shadow` 선언을 복사해 원하는 CSS 선택자에 붙여 넣으세요. 여러 레이어 결과는 쉼표로 연결된 하나의 속성이므로 선언 전체를 복사하고 실제 컴포넌트 배경에서 확인하세요.

설명을 확인했다면 직접 실행해 보세요.