박스 섀도우 생성기

이 도구는 무엇인가요?

box-shadow는 요소 뒤(또는 안쪽)에 그림자를 그리는 CSS 속성입니다. 직접 작성하면 가로 오프셋, 세로 오프셋, 블러 반경, 확산 반경, 색상까지 최대 다섯 개의 값을 순서대로 넣어야 하고, 선택적으로 inset 키워드까지 붙일 수 있어 순서를 헷갈리거나 처음부터 딱 맞는 강도를 잡기가 쉽지 않습니다.

이 도구는 이 과정을 직접 조작으로 바꿔줍니다. 슬라이더를 움직이면 미리보기 박스에서 그림자가 실시간으로 바뀌고, 마음에 들면 정확한 CSS를 바로 복사할 수 있습니다. 색상 선택기와 투명도 슬라이더를 함께 사용하면 자동으로 적절한 rgba() 값이 만들어지는데, 이는 완전히 불투명한 그림자보다 반투명한 그림자가 대체로 더 자연스러워 보이기 때문입니다.

왜 사용해야 할까요?

• 어떤 컨트롤을 조절하든 미리보기가 즉시 갱신되어, 코드에 적용하기 전에 정확한 그림자 모양을 확인할 수 있습니다.
• offset-x, offset-y, 블러, 확산, 색상, 투명도까지 한 화면에서 모두 조절할 수 있습니다.
• 클릭 한 번으로 떠 있는 듯한 드롭 섀도우 대신 눌린 듯한 인셋 효과를 적용할 수 있습니다.
• 선택한 투명도에 맞춰 색상이 이미 rgba()로 변환된, 바로 붙여넣을 수 있는 CSS를 출력합니다.
• 모든 계산이 브라우저 안에서만 이루어지며, 설정한 값은 어디에도 업로드되지 않습니다.
• 무료이며 회원가입이 필요 없고 모바일에서도 잘 작동합니다.

사용 방법

1. offset-x와 offset-y를 설정해 그림자의 위치를 정하세요 — 양수 값은 오른쪽/아래로, 음수 값은 왼쪽/위로 그림자를 이동시킵니다.
2. 블러 반경을 높이면 그림자 가장자리가 부드러워지고, 확산 값을 높이면 그림자가 요소 자체보다 커집니다.
3. 색상을 고르고 투명도를 조절하세요 — 현실적인 그림자는 대부분 완전한 검정이 아니라 15~40% 정도의 투명도를 사용합니다.
4. 그림자를 요소 뒤가 아니라 테두리 안쪽에 표시하고 싶다면 'inset'을 체크하세요.
5. 생성된 CSS를 복사해 스타일시트에 붙여넣으세요.

예시

입력

오프셋: 0px, 10px · 블러: 20px · 확산: 0px · 색상: 검정, 투명도 35%

결과

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

가로 오프셋 없이 요소 바로 아래에 부드럽게 떨어지는 그림자로, 카드나 버튼에서 가장 흔히 쓰이는 스타일 중 하나입니다.

단일 그림자와 여러 겹 그림자

이 도구는 그림자 한 겹을 만드는 데 특화되어 있는데, 버튼·카드·모달·드롭다운 대부분이 그림자 한 겹만으로 충분하기 때문에 실제 사용 사례의 대다수를 커버합니다. CSS는 쉼표로 구분한 여러 그림자를 같은 요소에 적용해 더 정교한 입체감을 줄 수도 있습니다(예: 좁고 진한 그림자 아래에 넓고 부드러운 그림자를 겹치는 방식). 다만 이건 직접 손으로 다듬어야 하는 응용 단계입니다 — 여기서 그림자 하나를 만든 뒤 줄을 복제하고 두 번째 값 세트를 조정해 쉼표로 이어 붙이면 됩니다.

자주 쓰이는 box-shadow 패턴

• 은은한 카드 리프트: 작은 오프셋(0~4px), 중간 정도의 블러(8~16px), 10~20% 투명도의 검정색.
• 떠 있는 느낌의 모달/드롭다운: 더 큰 오프셋(4~10px)과 블러(20~30px), 20~35% 투명도로 떠 있는 느낌을 강하게.
• 눌린 느낌의 인셋 버튼: inset을 체크하고 작은 오프셋과 중간 정도의 블러를 사용해 리프트가 아니라 움푹 팬 느낌을 주세요.
• 컬러 글로우: 검정 대신 브랜드 컬러를 선택하고 투명도를 40~60%까지 올린 뒤 확산 값을 살짝 키우면 버튼 주위에 은은한 발광 효과가 생깁니다.
• 선명하고 딱딱한 그림자: 블러와 확산을 모두 0으로 설정하면 부드러운 그림자 대신 뚜렷한 오프셋 실루엣이 만들어집니다.

둥근 모서리와 함께 사용하기

그림자와 둥근 모서리는 늘 함께 쓰입니다 — 카드, 버튼, 모달 대부분이 두 가지를 동시에 적용합니다. Border Radius Generator로 같은 요소의 모서리를 둥글게 만든 뒤, 두 도구에서 생성한 CSS 선언을 함께 적용하세요.

→ Border Radius 생성기 · 단위 변환기

자주 묻는 질문