- 가로(X)·세로(Y) 위치로 그림자가 어느 방향으로 떨어질지 정합니다. Y를 양수로 두면 아래쪽에 그림자가 생깁니다.
- 흐림(blur)으로 그림자의 부드러움을, 확산(spread)으로 그림자의 크기를 조절합니다.
- 색상과 투명도를 조절해 그림자의 짙기를 맞춥니다. 자연스러운 그림자는 보통 낮은 투명도(10~25%)가 좋습니다.
- 안쪽으로 파인 효과가 필요하면 "내부 그림자(inset)"를 켜고, 완성되면 "CSS 복사"로 코드를 가져갑니다.
box-shadow는 다섯 개의 값과 한 개의 키워드(inset)로 구성됩니다. 각 값이 무엇을 바꾸는지 알면 슬라이더를 의도대로 조절할 수 있습니다.
- X · Y(위치): 그림자가 좌우·상하로 얼마나 치우칠지 정합니다. Y가 양수면 아래로 떨어집니다.
- blur(흐림): 가장자리를 얼마나 부드럽게 번지게 할지. 클수록 은은해집니다.
- spread(확산): 그림자 자체의 크기. 양수면 커지고 음수면 작아집니다.
- 색상 · 투명도: 보통 검정에 가까운 색을 낮은 투명도(10~25%)로 줘야 자연스럽습니다.
값 조합으로 자연스러운 그림자를 만드는 레시피는 자연스러운 그림자 만들기에서 더 다룹니다.
- 자연스러운 카드 그림자: 빛은 보통 위에서 내려오므로 X는 0, Y는 양수(4~12px), blur는 그보다 크게(16~30px), 투명도는 낮게 주면 떠 있는 듯한 부드러운 카드 그림자가 됩니다. 검정 대신 살짝 어두운 회색을 쓰면 더 자연스럽습니다.
- 버튼 눌림 효과는 inset: 내부 그림자를 켜면 요소가 안으로 들어간 느낌을 줄 수 있어, 입력창이나 눌린 상태의 버튼 표현에 적합합니다. blur를 작게, spread를 음수로 주면 테두리 안쪽 음영이 또렷해집니다.
- 입체감은 그림자 두 겹으로: 가까운 곳의 진한 그림자와 멀리 퍼지는 옅은 그림자를 함께 쓰면 더 사실적입니다. 이 도구로 각각의 값을 만든 뒤, 코드를 쉼표로 이어 붙이면 다중 그림자를 구성할 수 있습니다.
blur(흐림)는 그림자 가장자리를 얼마나 부드럽게 번지게 할지, spread(확산)는 그림자 자체를 얼마나 크게(양수) 또는 작게(음수) 만들지를 정합니다. blur는 흐릿함, spread는 크기라고 이해하면 쉽습니다.
그림자는 보통 불투명한 색보다 반투명할 때 자연스럽습니다. 그래서 색상은 색상 피커로 고르고 투명도를 따로 조절해, 최종적으로 rgba 형식으로 코드를 생성합니다. 투명도 20% 안팎이 가장 무난합니다.
복사한 값은 CSS의 box-shadow 속성입니다. 원하는 요소 스타일에 그대로 붙여넣으면 적용됩니다. inset 키워드가 포함되면 내부 그림자로, 없으면 외부 그림자로 동작합니다.
box-shadow는 값을 쉼표로 이어 붙이면 여러 그림자를 한 요소에 동시에 줄 수 있습니다. 이 도구로 가까운 진한 그림자 값을 하나 만들고, 다시 멀리 퍼지는 옅은 그림자 값을 만든 뒤 두 값을 쉼표로 연결하면 됩니다. 먼저 쓴 그림자가 위에 올라옵니다.
box-shadow는 요소의 사각형(박스) 전체에 그림자를 주고, text-shadow는 글자 모양을 따라 그림자를 줍니다. 카드나 버튼처럼 영역에 입체감을 줄 때는 box-shadow를, 제목 글자에 또렷함이나 네온 효과를 줄 때는 text-shadow를 사용합니다. 확산(spread)과 inset은 box-shadow에만 있습니다.