box-shadow 문법: 값 순서와 inset 뜻, 그림자 겹치기

box-shadow: 6px 8px 20px 0px rgba(0,0,0,0.25); 같은 코드를 보고 숫자 네 개가 각각 무엇을 뜻하는지 헷갈려 본 적이 있을 겁니다. 순서를 살짝 바꿔 넣었다가 그림자 모양이 이상하게 나온 경험도 흔합니다.

이 값들은 임의로 나열된 게 아니라, 그림자가 실제로 어떻게 그려지는지를 그대로 코드로 옮긴 순서입니다. 순서마다 무엇을 제어하는지 알면 외울 필요 없이 원하는 그림자를 바로 만들 수 있습니다.

요약 ① box-shadow 값은 offset-x, offset-y, blur-radius, spread-radius, color 순서로 각자 다른 역할을 맡습니다. ② inset 키워드는 그림자가 그려지는 기준면을 박스 바깥에서 안쪽으로 바꿔, 튀어나온 느낌을 파인 느낌으로 뒤집습니다. ③ 콤마로 그림자를 여러 개 나열하면 먼저 쓴 그림자가 위, 나중에 쓴 그림자가 아래로 겹쳐 쌓여 입체감이 생깁니다.

값 순서 하나씩 뜯어보기

box-shadow의 기본 문법은 offset-x, offset-y, blur-radius, spread-radius, color 순서입니다. 이 중 blur-radius와 spread-radius는 생략할 수 있지만, 순서 자체는 절대 바뀌지 않습니다.

offset-x는 그림자를 가로로 얼마나 옮길지 정합니다. 양수면 오른쪽, 음수면 왼쪽으로 그림자가 이동합니다. offset-y는 세로 이동을 담당해서, 양수면 아래쪽, 음수면 위쪽으로 그림자가 밀려납니다.

blur-radius는 그림자 가장자리를 얼마나 흐릿하게 번지게 할지 정합니다. 0이면 경계가 또렷한 그림자가 되고, 값이 커질수록 가장자리가 넓게 퍼지며 부드러워집니다.

spread-radius는 블러가 적용되기 전에 그림자 도형 자체를 사방으로 얼마나 키우거나 줄일지 정합니다. 양수면 원래 박스보다 그림자가 크게 부풀고, 음수면 그림자가 원래 박스보다 작게 오그라듭니다. 마지막 color는 그림자의 색과 투명도를 정해서, 배경과 얼마나 진하게 겹치는지까지 조절합니다.

inset 하나로 그림자가 안쪽으로 뒤집히는 원리

inset 키워드가 없으면 그림자는 박스의 바깥쪽 가장자리를 기준으로, 박스 뒤에서 바깥으로 퍼져 나가듯 그려집니다. 박스가 배경 위에 떠 있는 것처럼 보이는 이유입니다.

inset을 붙이면 그림자가 그려지는 기준면이 박스의 안쪽 가장자리로 바뀝니다. 그림자가 박스 밖으로 새어 나가지 않고, 박스 안쪽 테두리에서부터 안으로 파고들듯 그려집니다.

그 결과 같은 offset·blur 값을 쓰더라도 inset이 있으면 표면이 볼록하게 튀어나온 느낌이 아니라, 안쪽으로 움푹 파이거나 눌린 느낌으로 완전히 반대로 보입니다. 입력창이나 눌린 버튼을 표현할 때 inset을 쓰는 이유입니다.

콤마로 그림자를 여러 개 쌓으면 왜 입체감이 생기는가

box-shadow는 값 하나를 콤마로 구분해서 여러 개를 나열할 수 있습니다. 이때 각 그림자는 독립된 레이어처럼 순서대로 겹쳐 그려집니다. 먼저 쓴 그림자가 가장 위쪽 레이어가 되고, 나중에 쓴 그림자일수록 그 아래에 깔립니다. 배경 이미지를 여러 장 겹칠 때와 같은 순서 규칙입니다.

실제 인터페이스에서 쓰는 입체적인 그림자는 대부분 그림자 하나가 아니라, 촘촘하고 진한 그림자와 넓고 옅은 그림자를 함께 겹쳐서 만듭니다. 가까운 광원이 만드는 짧고 선명한 그림자와, 먼 곳에서 은은하게 감싸는 그림자를 동시에 표현하기 때문에, 그림자 한 겹만 썼을 때보다 훨씬 자연스러운 입체감이 생깁니다.

슬라이더 값 하나하나가 문법의 어느 자리에 해당하는지 알았다면, 이제 그 값을 직접 눈으로 확인하면서 조정해볼 차례입니다.

직접 해보기 →

도구가 값 순서를 대신 기억해주는 방식

box-shadow 생성기는 지금까지 설명한 값들을 각각 별도의 슬라이더로 분리해 놓았습니다. 가로 오프셋 X, 세로 오프셋 Y, 흐림 Blur, 확산 Spread 슬라이더를 움직이면 위쪽 미리보기 박스의 그림자가 그 자리에서 바뀝니다.

슬라이더 옆에는 현재 값이 px 단위 숫자로 그대로 표시되기 때문에, offset-x와 offset-y 중 어느 슬라이더가 어느 자리에 들어가는지 헷갈릴 일이 없습니다. 색상은 색상 피커와 HEX 입력 칸, 그리고 투명도 슬라이더로 따로 조절되고, 이 값들이 합쳐져 화면 하단에 box-shadow 코드로 바로 조합됩니다.

inset 여부는 체크박스 하나로 켜고 끌 수 있습니다. 체크박스를 눌러보면 같은 offset·blur 값에서도 미리보기의 사각형이 튀어나온 모습에서 눌린 모습으로 즉시 뒤바뀌는 것을 눈으로 확인할 수 있습니다.

여러 겹의 그림자를 만들 때는 이렇게 활용합니다

이 도구는 한 번에 하나의 box-shadow 값을 만들어 코드로 보여줍니다. 앞서 설명한 것처럼 여러 그림자를 겹쳐 입체감을 내려면, 촘촘한 그림자 한 겹과 넓고 옅은 그림자 한 겹을 각각 따로 만들어야 합니다.

먼저 슬라이더를 진한 색·낮은 blur·0에 가까운 spread로 맞춰 가까운 그림자를 만들고 하단에 표시된 코드를 복사합니다. 그다음 같은 화면에서 슬라이더를 옅은 색·큰 blur·양수 spread로 다시 맞춰 넓은 그림자를 만들고 또 한 번 복사합니다.

두 번 복사한 값을 콤마로 이어 붙이면, 앞서 설명한 레이어 규칙대로 먼저 적은 그림자가 위에, 나중에 적은 그림자가 아래에 겹쳐진 최종 box-shadow 값이 완성됩니다.

정리

• box-shadow 값은 offset-x, offset-y, blur-radius, spread-radius, color 순서를 반드시 지켜야 하며 blur·spread는 생략할 수 있습니다.
• offset-x·offset-y는 그림자의 위치를, blur-radius는 가장자리의 흐림 정도를, spread-radius는 그림자 도형 자체의 크기를 각각 다르게 제어합니다.
• inset은 그림자가 그려지는 기준면을 박스 바깥에서 안쪽으로 바꿔, 튀어나온 느낌을 파인 느낌으로 뒤집습니다.
• 콤마로 그림자를 여러 개 나열하면 먼저 쓴 그림자가 위, 나중에 쓴 그림자가 아래로 겹쳐 쌓여 배경 이미지를 겹칠 때와 같은 순서로 그려집니다.
• 촘촘한 그림자와 넓고 옅은 그림자를 겹치면 그림자 하나만 쓸 때보다 훨씬 자연스러운 입체감을 만들 수 있습니다.

자주 묻는 질문

box-shadow에서 blur-radius와 spread-radius를 생략해도 되나요?

생략할 수 있습니다. blur-radius를 생략하면 0으로 취급되어 경계가 또렷한 그림자가 되고, spread-radius까지 생략하면 역시 0으로 취급되어 그림자 크기가 박스 원래 크기와 같아집니다. 다만 두 값을 생략하더라도 offset-x, offset-y, color의 순서는 그대로 지켜야 합니다.

offset-x와 offset-y에 둘 다 음수를 넣으면 어떻게 되나요?

그림자가 박스 기준으로 왼쪽 위 방향으로 이동합니다. offset-x가 음수면 왼쪽으로, offset-y가 음수면 위쪽으로 밀리기 때문에 두 값이 모두 음수면 그림자가 왼쪽 위에 나타나서, 마치 광원이 오른쪽 아래에 있는 것처럼 보이는 효과를 만듭니다.

inset을 쓰면 offset 값의 부호가 뜻하는 방향도 반대로 해석해야 하나요?

부호가 뜻하는 이동 방향 자체는 바뀌지 않습니다. 다만 그림자가 박스 안쪽 기준면에서 그려지기 때문에, 실제로 어둡게 보이는 가장자리는 반대쪽에 나타납니다. offset-x를 양수로 주면 일반 그림자는 오른쪽 가장자리가 어두워지지만, inset 그림자는 반대로 왼쪽 가장자리가 어두워집니다.

그림자를 여러 개 나열할 때 순서를 바꾸면 결과가 달라지나요?

달라질 수 있습니다. 콤마로 나열한 그림자 중 먼저 쓴 것이 항상 위쪽 레이어가 되므로, 두 그림자가 겹치는 영역에서는 먼저 쓴 그림자의 색과 형태가 그대로 보입니다. 특히 spread 값을 크게 줘서 그림자 영역이 넓어질수록 순서에 따른 차이가 눈에 잘 띕니다.