CSS 그림자 생성기

카드, 버튼, 모달에 입체감을 줄 때 가장 많이 쓰는 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 값의 순서가 중요한가요?

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

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

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

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

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

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

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