CSS 박스 그림자 생성기
그림자의 위치, 흐림, 확산, 색상과 불투명도를 조절하고 CSS를 생성하세요.
단일 box-shadow 값을 미리 보며 위치, 흐림, 확산, 색상, 불투명도를 조정하고 CSS 선언을 만듭니다.
사용 순서
- 가로와 세로 이동, 흐림, 확산 값을 px 단위로 입력합니다. 흐림 값은 0 이상이어야 합니다.
- 그림자 색상을 입력하고 불투명도를 0에서 1 사이 값으로 정합니다.
- 내부 그림자가 필요하면 inset 체크박스를 켭니다.
- 미리보기 카드에서 그림자를 확인한 뒤 결과 복사로 box-shadow 선언을 가져갑니다.
예시
샘플 값(가로 4, 세로 8, 흐림 24, 확산 0, 불투명도 0.25, 검정)은 box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.25); 를 만듭니다.
한계
그림자를 한 겹만 만듭니다. 여러 겹을 쉼표로 이어 붙이는 기능은 없습니다. 색상에 들어 있던 알파 값은 불투명도 입력으로 덮어써집니다. 흐림 값이 음수이면 오류가 나고, 확산 값은 음수도 허용합니다.
보안 주의
확산 값을 큰 음수로 주면 그림자가 요소 안쪽으로 가려져 거의 보이지 않을 수 있습니다. 미리보기 상자는 고정 크기이므로, 실제 요소 크기에서 같은 값이 어떻게 보이는지 한 번 더 확인하세요.
배경 지식
box-shadow는 요소 바깥에 그림자를 그리는 CSS 속성이며, inset을 붙이면 안쪽에 그립니다. 가로와 세로 이동은 그림자의 위치를, 흐림 반경은 가장자리가 번지는 정도를, 확산 반경은 그림자의 크기를 바꿉니다. 이 네 값과 색상을 조합해 요소가 떠 있는 듯한 입체감을 만듭니다.
흐림 반경이 커질수록 그림자가 넓고 부드럽게 퍼지며, 불투명도가 높을수록 진해집니다. 카드나 모달처럼 떠 있는 요소를 표현할 때는 불투명도를 낮게 두고 흐림을 크게 잡는 방식이 많이 쓰입니다. 그림자가 진하면 화면이 무거워 보이므로 낮은 값에서 시작해 조금씩 올리는 편이 안전합니다.
브라우저는 그림자를 합성 단계에서 그리는데, 흐림이 큰 그림자를 많은 요소에 겹쳐 쓰면 스크롤이나 애니메이션에서 프레임이 떨어질 수 있습니다. 긴 목록의 모든 항목에 큰 그림자를 주기보다 강조할 요소에만 적용하는 것이 좋습니다. 같은 효과를 여러 곳에서 쓸 때는 값을 CSS 변수로 묶어 두면 일관성을 지키기 쉽습니다.
자주 묻는 질문
흐림 반경과 확산 반경은 무엇이 다른가요?
흐림 반경은 그림자 가장자리를 얼마나 부드럽게 번지게 할지 정하고, 확산 반경은 그림자 외곽선을 얼마나 키울지 정합니다. 확산을 음수로 주면 그림자가 요소 크기보다 작아져 가장자리가 요소 뒤에 숨습니다.
색상에 rgba 투명도를 넣었는데 결과가 기대와 다른 이유는 무엇인가요?
이 도구는 색상 입력의 알파 값을 불투명도 칸의 값으로 바꿔 씁니다. 투명도를 조절하려면 불투명도 칸의 값을 쓰고, 색상 칸에는 알파가 없는 색을 넣는 편이 결과를 예측하기 쉽습니다.
여러 겹의 그림자를 만들려면 어떻게 하나요?
이 도구는 한 겹만 만듭니다. 생성된 값을 쉼표로 이어 붙이면 여러 겹이 되며, 앞에 적은 그림자가 위쪽에 그려지므로 순서를 정해 확인하세요.