CSS 박스 섀도 생성기

이 도구로 할 수 있는 일

box-shadow는 정해진 순서로 다섯 개의 값을 받는데, 그중 어느 하나만 조금 달라져도 화면에서는 아주 다르게 보여서 눈으로 확인하지 않고 쓰기가 불편합니다. 이 도구는 슬라이더를 움직일 때마다 실제 선언을 미리보기 상자에 그립니다. 더 좁은 두 번째 접지 레이어를 더할 수도 있는데, 이는 요소가 흐릿해 보이는 대신 들려 보이도록 디자이너들이 쓰는 조합입니다. 안쪽 그림자로 바꾸면 눌린 면이나 파인 면을 표현할 수 있습니다.

사용 방법

1. 가로·세로 오프셋, 흐림, 확산을 조절합니다.
2. 색과 불투명도를 고르고, 필요하면 안쪽 그림자나 접지 레이어를 켭니다.
3. box-shadow 선언을 스타일시트에 복사합니다.

개인정보

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

자주 묻는 질문

업로드되는 것이 있나요?

없습니다. 미리보기는 브라우저가 그리는 CSS 그림자이고, 선언은 페이지 안에서 조립됩니다.

확산은 무엇을 하나요?

확산은 흐려지기 전의 그림자를 키우거나 줄입니다. 음수로 하면 그림자가 안쪽으로 당겨져, 부드러운 그림자가 요소 양옆으로 삐져나오는 것을 막을 수 있습니다.

왜 두 겹을 쓰나요?

넓고 부드러운 그림자 하나만 있으면 안개처럼 보이기 쉽습니다. 요소 가까이에 작고 진한 레이어를 더하면 접지선이 생기고, 둘이 함께 있어야 높이로 읽힙니다.