🔲 CSS box-shadow 생성기

사용법

1. 미리보기 상자 아래 슬라이더로 그림자를 만들어요. 가로 x는 오른쪽(+)·왼쪽(−), 세로 y는 아래(+)·위(−)로 그림자를 밀어요.
2. 흐림(blur)을 올릴수록 그림자 가장자리가 부드럽게 퍼지고, 퍼짐(spread)은 그림자 크기 자체를 키우거나(+) 줄여요(−).
3. 색을 고르고 불투명도를 낮춰 은은하게 만들어요. 자연스러운 그림자는 대부분 검정에 5~25% 불투명도를 써요.
4. inset을 켜면 그림자가 상자 안쪽에 생겨서 눌린 버튼이나 입력창 느낌을 낼 수 있어요.
5. + 겹 추가로 그림자를 최대 4겹까지 겹쳐요. 오른쪽 css 칸의 코드를 copy 해서 스타일시트에 붙이면 끝이에요. 프리셋 버튼으로 카드·버튼용 예시에서 시작할 수도 있어요.

box-shadow 문법

MDN이 정리한 문법은 box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;예요. 앞의 두 값(오프셋)은 필수이고, 흐림과 퍼짐, 색은 생략할 수 있어요. 생략하면 흐림과 퍼짐은 0, 색은 글자색(currentcolor)이 돼요. 이 도구는 흐림·퍼짐을 항상 적어 주고, 값이 0이면 단위 없이 0으로 써요(0은 단위가 필요 없어요).

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

• 검정 대신 낮은 불투명도 — rgba(0, 0, 0, 0.1)처럼 검정에 투명도를 줘야 배경색과 섞여서 자연스러워요. 불투명한 회색 그림자는 배경이 바뀌면 어색해져요.
• 세로 오프셋을 가로보다 크게 — 빛이 위에서 온다고 가정해 y를 크게, x는 0에 가깝게 두면 익숙한 그림자가 돼요.
• 음수 퍼짐으로 옆면 번짐 줄이기 — 흐림을 키우면 그림자가 옆으로도 번져요. spread를 −1~−4 정도 주면 아래쪽에만 그림자가 모인 듯 보여요.
• 겹겹이 쌓기 — 작고 선명한 그림자와 크고 흐릿한 그림자를 함께 쓰면 한 겹보다 깊이가 살아요.
• 높이를 일관되게 — 카드(낮음)와 팝업(높음)처럼 요소의 높이에 따라 y와 blur를 단계별로 정해 두고 같은 값을 반복해서 쓰면 화면이 정돈돼 보여요.

이 도구로 만든 예시 코드

여러 겹의 순서와 inset을 같이 쓸 때

쉼표로 이은 여러 그림자는 앞에 쓴 것이 위에 그려져요. 그래서 선명한 그림자를 앞에, 넓게 퍼지는 그림자를 뒤에 두면 가장자리는 또렷하고 바깥은 부드럽게 보여요. inset 그림자는 상자 안쪽에, 일반 그림자는 바깥쪽에 그려지므로 둘을 함께 써도 서로 가리지 않아요. 예를 들어 입력창에 inset 0 1px 2px rgba(0, 0, 0, 0.2)를 주고 포커스일 때 0 0 0 3px rgba(42, 120, 214, 0.35)를 더하면 안쪽 음영과 바깥 윤곽 링을 한 속성으로 처리할 수 있어요.

box-shadow를 쓸 때 알아 둘 것

• 레이아웃을 바꾸지 않아요 — 그림자는 상자 크기에 영향을 주지 않고 옆 요소와 겹쳐 보일 수 있어서, 간격이 좁으면 여백을 따로 줘야 해요. 윤곽선은 border와 달리 공간을 차지하지 않아요.
• 모서리 둥글기를 따라가요 — border-radius를 주면 그림자도 같은 모양으로 둥글게 그려져요.
• 이미지의 투명 영역은 따라가지 않아요 — box-shadow는 상자 모양 기준이에요. PNG의 투명 부분 윤곽을 따라 그림자를 주려면 filter: drop-shadow()를 써요.
• 성능 — 흐림 값이 크고 겹이 많으며 애니메이션까지 걸면 렌더링 부담이 커질 수 있어요. 호버 때 그림자를 바꿀 때는 transition: box-shadow 0.2s 정도로 가볍게 쓰는 편이 좋아요.
• 접근성 — 그림자만으로 요소의 경계나 상태를 표현하면 대비가 낮아 잘 안 보일 수 있어요. 중요한 경계는 선이나 색 대비로도 구분해 주세요. 색 대비는 색상 대비 검사기로 확인할 수 있어요.

요소별로 시작하기 좋은 값

처음부터 숫자를 고르기 막막하다면 아래 표의 값에서 출발해 슬라이더로 조금씩 고쳐 보세요. 정답은 아니고 화면 크기와 배경색에 맞춰 조정하는 출발점이에요.

다크 모드에서는 검정 그림자가 어두운 배경에 묻혀 잘 안 보이므로 불투명도를 높이거나(0.4~0.6) 경계선을 함께 쓰는 경우가 많아요. 이 도구에서 배경색을 직접 바꿀 수는 없지만, 만든 코드를 실제 화면에 붙여 라이트·다크 두 테마에서 모두 확인해 보세요.

text-shadow, drop-shadow와 비교

문법 출처: MDN Web Docs 「box-shadow」. 코드 생성 규칙은 위 예시를 같은 코드로 검산했고, 입력한 값은 브라우저 안에서만 처리돼요. 배경을 그라데이션으로 칠하려면 CSS 그라데이션 생성기, 픽셀을 rem으로 바꾸려면 px ↔ rem 변환기를 쓰세요.

자주 묻는 질문

이 도구와 함께 보면 좋은 글

관련 도구