Box Shadow 생성기

Box Shadow 생성기 사용 방법

1. X·Y 오프셋으로 그림자가 놓일 방향을 정합니다.
2. 흐림(blur)으로 경계의 부드러움을, 확산(spread)으로 크기를 조절합니다.
3. 색상과 불투명도를 정하고, 필요하면 레이어를 추가해 겹칩니다.
4. 미리보기 아래의 CSS 코드를 복사해 그대로 붙여넣습니다.

box-shadow 값의 의미

• offset-x / offset-y — 그림자를 오른쪽·아래로 밀어내는 거리. 음수를 주면 반대 방향으로 갑니다.
• blur-radius — 0이면 경계가 선명한 도형, 값이 커지면 부드럽게 퍼집니다.
• spread-radius — 그림자 자체를 키우거나 줄입니다. 음수면 안쪽으로 수축합니다.
• inset — 그림자를 요소 바깥이 아니라 안쪽에 그립니다(눌린 느낌).

자연스러운 그림자를 만드는 요령

한 겹의 진한 그림자보다 옅은 그림자를 두세 겹 겹치는 쪽이 실제 조명에 가깝습니다. 가까운 레이어는 오프셋·흐림을 작게, 먼 레이어는 크게 잡고 불투명도를 낮춥니다. 색은 검정보다 배경색을 어둡게 한 색을 쓰면 화면 전체와 덜 어긋납니다. 여러 요소가 같은 높이를 가져야 하면 그림자 값을 CSS 변수로 묶어 재사용하세요.