box-shadow란?
box-shadow는 요소 주위에 그림자를 더해 입체감을 주는 CSS 속성입니다. 가로·세로 위치, 흐림(blur), 확산(spread), 색상, 그리고 안쪽 그림자(inset) 여부를 조합해 카드·버튼·이미지·입력창 등 다양한 요소에 자연스러운 그림자를 입힐 수 있습니다. 이미지 파일 없이 코드만으로 표현되므로 용량이 작고 화면 크기에 맞춰 선명하게 표시됩니다.
사용법
- 가로 X / 세로 Y 슬라이더로 그림자가 놓일 방향과 거리를 정합니다.
- 흐림(blur)으로 가장자리를 부드럽게, 확산(spread)으로 그림자 크기를 조절합니다.
- 그림자 색과 투명도(%)를 지정하면 rgba 값으로 합성됩니다.
- 안으로 파인 효과가 필요하면 inset을 체크합니다.
- 위쪽 미리보기 박스에서 결과를 즉시 확인하고, box-shadow 코드를 복사해 CSS에 붙여넣습니다.
값이 만들어지는 방식
box-shadow 한 줄은 X · Y · blur · spread · 색상 순서로 이어진 값입니다. 이 도구는 슬라이더에서 읽은 숫자를 그대로 px 단위로 붙이고, 색상 선택기의 HEX 값을 R·G·B 세 숫자로 분해한 뒤 투명도(%)를 0~1 사이 소수로 바꿔 rgba(r, g, b, a) 형태로 합칩니다. inset을 켜면 값 맨 앞에 inset이 붙습니다. 그래서 화면에 보이는 미리보기와 아래에 출력되는 코드가 항상 같은 값을 가리킵니다.
계산과 미리보기는 모두 브라우저 안에서 처리되므로 서버로 값을 보내지 않고, 인터넷 연결이 느려도 슬라이더를 움직이는 즉시 결과가 바뀝니다.
여러 겹 그림자와 프리셋
그림자는 레이어를 최대 3개까지 겹칠 수 있습니다. 레이어를 추가하면 각 레이어의 값이 쉼표로 이어져 하나의 box-shadow 선언으로 출력되고, 목록에서 앞쪽에 있는 레이어가 화면에서 위에 그려집니다. 밝은 쪽과 어두운 쪽 그림자를 한 쌍으로 겹치면 뉴모피즘처럼 도드라진 느낌을, 얇은 spread 레이어와 넓은 blur 레이어를 겹치면 테두리와 그림자를 동시에 표현할 수 있습니다.
프리셋 갤러리에는 소프트 카드, 떠있는, 부드러운 큰, 하단 강조, 뉴모피즘, 안쪽 눌림, 글로우, 테두리+그림자, 입체 버튼, 길게 늘인까지 10가지 조합이 준비되어 있습니다. 하나를 클릭하면 슬라이더 값이 통째로 바뀌므로, 처음부터 값을 잡기보다 비슷한 프리셋을 고른 뒤 미세하게 다듬는 편이 빠릅니다.
복사 형식 3가지
- CSS 복사 —
box-shadow: …;선언을 그대로 복사합니다. - Tailwind 복사 — 같은 값을 임의값 클래스
shadow-[…]형태로 바꿔 복사합니다. 공백은 밑줄로, 값 사이 쉼표는 이스케이프 처리됩니다. - Figma처럼 복사 — 레이어마다 X, Y, Blur, Spread, Color를 한 줄로 적어 줍니다. 디자이너에게 그림자 값을 전달할 때 쓰기 좋습니다.
활용 예시
- 목록 카드에 옅은 그림자를 넣어 배경과 분리하기
- 버튼에 마우스를 올렸을 때 Y와 blur를 키워 떠오르는 느낌 주기
- 입력창 안쪽에 inset 그림자를 넣어 눌린 상태 표현하기
- 강조색으로 blur를 크게 준 글로우 그림자로 포커스 표시하기
- 모달·드롭다운처럼 위에 뜨는 요소에 넓고 흐린 그림자 적용하기
주의점과 팁
- 그림자 색을 순수한 검정으로 두면 탁해 보이기 쉽습니다. 배경과 같은 계열의 어두운 색에 낮은 투명도를 주면 더 자연스럽습니다.
- 투명도는 10~25% 정도부터 시작해 필요한 만큼 올리는 편이 무난합니다.
- blur 값이 매우 크거나 레이어를 여러 겹 쓴 그림자를 넓은 영역에 반복하면 스크롤이 무거워질 수 있습니다.
- 다크 모드에서는 같은 그림자가 거의 보이지 않을 수 있으니, 미리보기 배경을 어둡게로 바꿔 확인해 보세요.
- 그림자는 요소의 크기 계산에 포함되지 않아 옆 요소를 밀어내지 않습니다. 잘려 보인다면 부모의
overflow설정을 확인하세요.
자주 묻는 질문
box-shadow란 무엇인가요?
요소 주위에 그림자를 추가하는 CSS 속성입니다. 가로·세로 위치, 흐림(blur), 확산(spread), 색상을 지정해 카드·버튼·이미지 등에 입체감을 줄 수 있으며 이미지 없이 코드만으로 표현합니다.
blur와 spread의 차이는 무엇인가요?
blur(흐림)는 그림자의 가장자리를 부드럽게 번지게 하는 값이고, spread(확산)는 그림자 자체의 크기를 키우거나 줄이는 값입니다. blur가 클수록 흐릿해지고, spread가 양수면 커지고 음수면 작아집니다.
inset은 어떤 효과인가요?
inset을 켜면 그림자가 요소 안쪽으로 들어가 움푹 파인 듯한 효과를 만듭니다. 입력창이나 눌린 버튼 같은 느낌을 표현할 때 사용합니다.
만든 그림자는 어떻게 사용하나요?
출력된 box-shadow 코드를 복사해 적용하려는 요소의 CSS에 붙여넣으면 됩니다. 예를 들어 .box { box-shadow: 0 8px 16px rgba(0,0,0,0.25); } 처럼 씁니다.
그림자를 여러 겹 겹칠 수 있나요?
레이어를 최대 3개까지 추가할 수 있습니다. 각 레이어 값이 쉼표로 이어져 하나의 box-shadow 선언으로 출력되며, 목록 앞쪽 레이어가 화면에서 위에 그려집니다.
Tailwind나 Figma에서도 쓸 수 있나요?
Tailwind 복사 버튼은 같은 값을 임의값 클래스 shadow-[…] 형태로 바꿔 주고, Figma처럼 복사 버튼은 레이어마다 X, Y, Blur, Spread, Color를 한 줄로 정리해 줍니다.
어두운 배경에서도 확인할 수 있나요?
미리보기 배경을 밝게와 어둡게 중에서 고를 수 있습니다. 다크 모드에서 그림자가 묻히지 않는지 확인할 때 사용하세요.
입력한 값이 저장되나요?
저장되지 않습니다. 모든 계산과 미리보기는 브라우저 안에서만 이루어지며 값이 서버로 전송되지 않고, 새로고침하면 기본값으로 돌아갑니다.