CSS 박스 섀도우 생성기 사용 방법
가로·세로 위치, 흐림, 퍼짐, 색상, 투명도와 inset 여부를 조절합니다.
결과에서 확인할 내용
미리보기와 완성된 box-shadow 선언을 제공합니다.
이 도구가 필요한 상황
그림자의 가로·세로 이동, 흐림, 확산, 색상과 불투명도를 한 화면에서 조절해 CSS로 복사합니다.
실제 사용 예시
가로 0px, 세로 12px, 흐림 30px, 확산 0px의 그림자는 카드가 아래로 떠 있는 느낌을 줍니다. inset을 켜면 그림자가 상자 안쪽으로 바뀝니다.
결과를 정확히 읽는 방법
- 흐림을 크게 하면 경계가 부드러워지지만 그림자의 범위도 넓어집니다.
- 확산이 음수이면 그림자 면적이 줄어듭니다.
- 같은 RGBA 값이라도 배경색에 따라 체감 강도가 다릅니다.
완료 전 확인
결과를 밝은 배경과 어두운 배경 모두에 적용해 카드 경계와 텍스트가 흐려 보이지 않는지 확인하세요.
사용 전 꼭 확인하세요
과도한 흐림과 큰 그림자는 저사양 모바일에서 렌더링 비용이 커질 수 있습니다.
도구 설명 최종 수정: 2026년 10월 9일