박스 그림자 생성기
그림자 방향, 흐림 정도, 색상을 조절해 CSS box-shadow 코드를 만들어줍니다.
박스 그림자 생성기 사용법
- X와 Y 오프셋을 움직여 그림자가 놓일 방향을 정합니다.
- 흐림과 퍼짐 값으로 그림자의 부드러운 정도와 크기를 맞춥니다.
- 색상과 투명도를 정하면 미리보기 상자에 바로 반영됩니다.
- 아래 칸에 만들어진 box-shadow 코드를 복사 버튼으로 가져갑니다.
다섯 개 값이 코드에 놓이는 순서
만들어지는 코드는 X, Y, 흐림, 퍼짐, 색 순서로 한 줄에 들어갑니다. 색은 고른 16진수 색과 투명도를 합쳐 rgba 형태로 바뀌고, 투명도는 0에서 100 사이 값을 100으로 나눠 소수점 두 자리로 적힙니다.
| 값 | 하는 일 |
|---|---|
| X 오프셋 | 그림자를 오른쪽(양수) 또는 왼쪽(음수)으로 옮깁니다 |
| Y 오프셋 | 그림자를 아래(양수) 또는 위(음수)로 옮깁니다 |
| 흐림 | 클수록 가장자리가 넓게 번지고 0이면 경계가 또렷합니다 |
| 퍼짐 | 그림자를 원래 크기보다 키우거나(양수) 줄입니다(음수) |
| 색과 투명도 | rgba 값으로 합쳐져 그림자 색이 됩니다 |
떠 있는 느낌을 내는 값 잡기
빛이 위에서 내려온다고 보면 X는 0에 가깝게 두고 Y만 양수로 주었을 때 자연스럽습니다. 흐림은 Y 오프셋의 두 배 안팎에서 시작해 조정하고, 색을 진한 검정으로 두더라도 투명도를 20 안팎까지 낮추면 배경색과 덜 부딪힙니다.
자주 묻는 질문
여러 겹의 그림자도 만들 수 있나요?
현재는 그림자 1겹 기준이며, 필요하시면 다중 그림자 기능도 추가해드릴 수 있습니다.
생성된 코드는 어떻게 쓰나요?
복사 버튼을 눌러 CSS 파일의 box-shadow 속성에 그대로 붙여넣으면 됩니다.
안쪽 그림자(inset)도 가능한가요?
현재는 바깥쪽 그림자만 지원합니다.
미리보기와 실제 화면이 다르게 보여요.
그림자는 뒤에 깔린 배경색에 따라 다르게 보입니다. 실제 적용할 배경이 미리보기와 다르면 투명도를 조금 올리거나 내려 다시 맞추면 됩니다.
퍼짐에 음수를 넣으면 어떻게 되나요?
그림자가 요소보다 작아집니다. Y 오프셋과 함께 쓰면 아래쪽에만 좁게 깔리는 그림자가 되어, 카드가 바닥에 붙어 있는 느낌을 낼 때 씁니다.
글자에도 같은 값을 쓸 수 있나요?
box-shadow는 상자 모양에만 붙습니다. 글자에는 값 순서가 비슷한 text-shadow를 쓰면 되지만 퍼짐 값이 없어 X, Y, 흐림, 색만 넣습니다.