CSS box-shadow 완전 정복 — 그림자 값 5가지 이해

카드, 버튼, 모달에 입체감을 줄 때 가장 많이 쓰는 CSS 속성이 box-shadow입니다. 값 하나에 가로 이동, 세로 이동, 번짐, 확산, 색까지 여러 정보를 한꺼번에 담다 보니 처음에는 어떤 숫자가 무엇을 뜻하는지 헷갈리기 쉽습니다. 다섯 가지 값이 각각 어떤 역할을 하는지, inset과 다중 그림자는 어떻게 쓰는지 예시 코드로 정리하고, 직접 값을 만들고 싶다면 CSS 그림자 생성기로 시각적으로 조정해 보는 방법을 알아봅니다.

한눈에 보기

• 기본 문법은 box-shadow: offset-x offset-y blur spread color; 순서입니다.
• offset-x는 가로 이동으로, 양수면 오른쪽으로 갑니다.
• offset-y는 세로 이동으로, 양수면 아래로 갑니다.
• blur는 번짐 반경으로, 클수록 흐릿하게 퍼집니다.
• spread는 확산으로, 양수면 그림자가 커집니다.
• color는 그림자 색이며 보통 rgba로 투명도를 함께 지정합니다.
• inset을 붙이면 안쪽 그림자, 쉼표로 나열하면 여러 그림자를 겹칠 수 있습니다.

box-shadow 기본 문법

box-shadow는 다음과 같은 순서로 값을 적습니다.

box-shadow: offset-x offset-y blur spread color;

가장 흔히 보는 예시는 아래처럼 적습니다. 오른쪽 이동 없이 아래로 4px 내리고, 6px만큼 번지게 한 뒤 검정에 10% 투명도를 준 그림자입니다.

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

offset-x와 offset-y만 필수이고, blur·spread·color는 생략할 수 있습니다. 생략하면 blur와 spread는 0, 색은 기본 텍스트 색을 따릅니다. 그래서 실무에서는 색을 명시적으로 적는 편이 결과를 예측하기 좋습니다.

5가지 값 한눈에 정리

각 값이 무엇을 의미하고 어떻게 동작하는지 표로 정리하면 다음과 같습니다.

예를 들어 box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.2);는 오른쪽 8px, 아래 8px로 이동하면서 blur가 0이라 경계가 또렷한 그림자가 됩니다. 반대로 blur 값을 키우면 부드럽게 퍼지는 그림자가 됩니다. 숫자를 바꿔 가며 결과를 바로 확인하려면 CSS 그림자 생성기에서 슬라이더로 값을 조정해 보는 것이 가장 빠릅니다.

inset과 다중 그림자

box-shadow는 기본적으로 요소 바깥쪽으로 그림자를 그립니다. 값 앞에 inset 키워드를 붙이면 안쪽으로 들어간 그림자가 되어, 눌린 듯한 입력창이나 홈(groove) 효과를 표현할 수 있습니다.

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

또한 그림자를 쉼표로 나열하면 여러 개를 한 번에 겹칠 수 있습니다. 바깥 그림자와 안쪽 그림자를 동시에 주거나, 색이 다른 그림자를 층층이 쌓아 더 풍부한 입체감을 만들 수 있습니다.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.1),
  0 4px 8px rgba(0, 0, 0, 0.08),
  inset 0 0 0 1px rgba(255, 255, 255, 0.05);

먼저 적은 그림자가 위쪽에, 나중에 적은 그림자가 아래쪽에 깔립니다.

자연스러운 그림자를 만드는 팁

그림자가 어색해 보이는 가장 흔한 이유는 색이 너무 진하거나 번짐이 부족하기 때문입니다. 자연스러운 그림자는 보통 다음 조건을 따릅니다.

• 낮은 투명도: 색을 rgba로 적고 불투명도를 0.1~0.2 정도로 낮게 둡니다.
• 적당한 blur: 경계가 부드럽게 풀리도록 번짐을 충분히 줍니다.
• 작은 offset: 가로·세로 이동은 너무 크지 않게, 빛이 위에서 비치는 느낌으로 세로 이동을 약간 줍니다.

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

여러 그림자를 겹쳐 가까운 그림자는 또렷하게, 먼 그림자는 넓고 옅게 쌓으면 더 실제 같은 깊이감이 납니다. 값 조합이 떠오르지 않을 때는 CSS 그림자 생성기로 미리 보면서 코드를 복사해 쓰면 편합니다.

자주 묻는 질문

box-shadow 값의 순서가 중요한가요?

네. 숫자 값은 offset-x offset-y blur spread 순서로 해석되므로 순서를 바꾸면 의미가 달라집니다. 색은 보통 맨 뒤에, inset은 맨 앞에 적습니다.

blur와 spread는 무엇이 다른가요?

blur는 그림자 경계를 흐릿하게 퍼지게 하는 번짐이고, spread는 그림자 자체의 크기를 키우거나 줄이는 확산입니다. spread는 흐림 없이 크기만 바꿉니다.

그림자 색은 꼭 rgba로 써야 하나요?

꼭 그래야 하는 것은 아니지만, rgba로 투명도를 함께 주면 배경과 자연스럽게 섞여 훨씬 부드러운 그림자가 됩니다. 그래서 실무에서 많이 권장됩니다.

그림자를 여러 개 넣으려면 어떻게 하나요?

쉼표로 그림자 값을 나열하면 됩니다. 바깥 그림자와 inset 그림자를 함께 쓸 수도 있고, 먼저 적은 것이 위에 그려집니다.

마무리

box-shadow는 offset-x offset-y blur spread color 다섯 값과 inset, 그리고 쉼표로 겹치는 다중 그림자만 이해하면 대부분의 효과를 만들 수 있습니다. 낮은 투명도와 적당한 번짐을 기억하면 어색하지 않은 그림자를 쉽게 얻을 수 있습니다. 값을 직접 다뤄 보고 싶다면 CSS 그림자 생성기에서 슬라이더로 조정하며 결과를 확인하고 코드를 복사해 보세요.