CSS 그림자 생성기
슬라이더로 그림자를 눈으로 맞추고, 완성되면 코드만 복사하세요.
자주 쓰는 값이라면 Ctrl+D로 즐겨찾기 해두세요 · 지금 값이 주소에 함께 저장됩니다
이 링크를 저장해두면 다음에 바로 이 그림자로 돌아올 수 있어요.
설명
오프셋·흐림·퍼짐·색상/투명도를 조절하면 그 값이 그대로 CSS 코드로 바뀝니다. 복사해서 스타일시트에 붙여넣으면 바로 적용되고, 프리셋 버튼으로 버튼·카드·모달에 자주 쓰는 값을 한 번에 불러올 수도 있습니다.
관련 도구
CSS box-shadow 속성을 시각적으로 조절해 원하는 그림자 코드를 만들어 주는 도구입니다. 수평·수직 거리, 흐림 반경, 확산 거리, 색상을 슬라이더와 컬러 피커로 실시간으로 조정하면서 결과를 미리보기로 확인할 수 있어, CSS 문법을 외울 필요 없이 눈으로 보며 원하는 스타일을 잡을 수 있습니다. 버튼, 카드, 패널 등 UI 요소에 입체감을 주고 싶은 웹 개발자와 디자이너에게 유용합니다.
사용 방법
슬라이더를 움직여 수평(offset-x)과 수직(offset-y) 거리를 조절하면 그림자가 놓이는 방향이 바뀝니다. 흐림(blur) 값을 올리면 그림자 가장자리가 부드러워지고, 확산(spread) 값을 올리면 그림자 크기 자체가 커집니다. 색상 피커에서 색을 고른 뒤 바로 옆 슬라이더로 불투명도를 맞춥니다. 위쪽 프리셋 버튼을 누르면 버튼·카드·모달에 자주 쓰이는 값이 한 번에 채워집니다. 미리보기가 마음에 들면 생성된 CSS 코드를 복사해 스타일시트에 바로 붙여 넣습니다. 이 도구는 바깥 그림자를 만들어 주며, 안쪽으로 파인 그림자(inset)가 필요하면 복사한 값 맨 앞에 inset을 직접 적어 주면 됩니다.
이럴 때 유용해요
버튼에 클릭감을 주는 미세한 그림자, 카드 컴포넌트에 부드럽게 띄워진 느낌의 그림자, 입력 필드에 포커스 표시용 내부 그림자 등 상황별로 값이 전혀 다릅니다. 특히 요즘 많이 쓰이는 뉴모피즘(Neumorphism) 스타일은 밝은 그림자와 어두운 그림자를 쉼표로 이어 두 개를 동시에 선언하는데, 이 도구로 값을 하나씩 만든 뒤 쉼표로 이어 붙이면 같은 효과를 낼 수 있습니다. 다크 모드용 그림자 색도 컬러 피커로 바꿔 가며 바로 확인할 수 있습니다.
알아두면 좋은 점
box-shadow는 레이아웃에 영향을 주지 않아 주변 요소 위치를 건드리지 않습니다. 그림자 색상에 rgba(0,0,0,0.15)처럼 낮은 불투명도를 쓰면 배경색이 바뀌어도 자연스럽게 어울립니다. 성능 측면에서 box-shadow는 filter: drop-shadow보다 렌더링 비용이 낮아 스크롤이 많은 긴 목록에 적합합니다. 레이어를 여러 개 쌓을수록 파일 크기는 늘지 않지만 GPU 합성 비용이 늘어나므로 3개 이하로 쓰는 것이 일반적입니다.
자주 묻는 질문
생성된 코드에 벤더 프리픽스(-webkit- 등)가 필요한가요?
그림자를 두 개 이상 겹치려면 어떻게 하나요?
inset 그림자는 어떤 경우에 쓰나요?
text-shadow와 box-shadow는 무엇이 다른가요?
그림자 색으로 완전 투명(opacity 0)을 설정하면 어떻게 되나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
박스 그림자 생성기, 이렇게 씁니다
가로 거리, 세로 거리, 흐림, 번짐, 색상 다섯 개의 값을 슬라이더와 색상 피커로 조절하면 그 즉시 미리보기 상자와 버튼·카드·아바타 예시에 같은 그림자가 반영되고, 바로 아래 완성된 box-shadow 코드가 만들어집니다. 원하는 모양이 나오면 CSS 복사 버튼을 눌러 CSS에 그대로 붙여넣으면 끝입니다. 값을 조금씩 밀어보며 그림자가 어느 방향으로 늘어나고 얼마나 부드러워지는지 눈으로 확인하는 것이 이 도구의 핵심입니다.
다섯 개 값이 각각 무슨 일을 하나
생성 코드는 box-shadow: X Y blur spread color; 순서로 만들어집니다. 값 하나하나가 그림자의 다른 성질을 담당합니다.
| 값 | 하는 일 |
|---|---|
| X(가로 거리) | 양수면 그림자가 오른쪽, 음수면 왼쪽으로 이동 |
| Y(세로 거리) | 양수면 아래쪽, 음수면 위쪽으로 이동 |
| blur(흐림) | 클수록 가장자리가 뿌옇게 퍼짐. 0이면 칼같이 선명한 그림자 |
| spread(번짐) | 양수면 그림자가 사방으로 커지고, 음수면 안쪽으로 줄어듦 |
| color | 그림자 색. 보통 검정에 투명도를 섞어 씀 |
거리(X·Y)는 그림자의 위치를, 흐림·번짐은 그림자의 크기와 부드러움을 정한다고 나눠 생각하면 값 조합이 훨씬 쉬워집니다.
이럴 때 씁니다
버튼이나 카드가 배경에서 살짝 떠 보이게 하는 입체감, 이미지 아래 은은한 그림자, 모달 창을 화면 위로 띄우는 강조 효과에 자주 씁니다. 특히 카드 UI에서는 X를 0, Y를 살짝 양수로 두고 흐림을 넉넉히 준 그림자가 가장 자연스럽습니다. 마우스를 올렸을 때 Y와 흐림을 키워 카드가 더 떠오르는 hover 효과를 만들 때도 이 도구로 두 상태의 값을 미리 정해두면 편합니다.
실전 팁
• 그림자는 검정 단색보다 rgba(0,0,0,0.15)처럼 투명도를 낮춰 쓰면 훨씬 자연스럽습니다. 진한 순검정은 인위적으로 보입니다.
• 실제 빛은 위에서 내려오므로 X는 0에 가깝게, Y는 작은 양수로 두는 편이 현실적인 그림자에 가깝습니다.
• 흐림 값이 Y보다 2~3배 크면 부드럽게 퍼진 고급스러운 그림자가 됩니다.
• 값 앞에 inset을 붙이면 바깥이 아니라 상자 안쪽으로 파고드는 그림자가 됩니다. 입력 필드 눌린 느낌을 낼 때 씁니다.
• 콤마로 여러 그림자를 겹쳐 쓸 수 있어, 가까운 진한 그림자와 멀리 퍼진 옅은 그림자를 함께 주면 깊이감이 살아납니다.
자주 묻는 질문
그림자가 한쪽만 나오게 할 수 있나요?
box-shadow는 기본적으로 사방으로 퍼지지만, X나 Y 거리를 크게 주고 흐림을 작게 하면 한쪽으로 치우친 그림자를 만들 수 있습니다. 완전히 한 변에만 그림자를 두고 싶다면 spread를 음수로 줄여 다른 방향으로 새어나오는 부분을 상쇄하는 방법을 씁니다.
blur와 spread가 뭐가 다른가요?
spread는 그림자 자체의 크기를 키우거나 줄이는 값이라 경계가 그대로 선명하게 커집니다. blur는 크기는 그대로 두고 가장자리만 뿌옇게 흐리게 만듭니다. 부드럽게 퍼뜨리려면 blur를, 그림자 면적 자체를 넓히려면 spread를 조절하세요.
글자에도 이 코드를 쓸 수 있나요?
box-shadow는 상자(요소 테두리) 기준 그림자라 글자에는 적용되지 않습니다. 글자 그림자는 별도 속성인 text-shadow를 써야 하며, 이쪽은 spread 값이 없고 X·Y·흐림·색 네 값만 씁니다.
그림자가 상자 안쪽으로 들어가게 하려면요?
생성 코드 맨 앞에 inset을 추가하면 됩니다. 예를 들어 box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);는 상자 안쪽 위에 눌린 듯한 그림자를 만듭니다. 이 도구는 바깥 그림자만 만들어 주므로, 복사한 코드에 inset을 직접 적어 주면 됩니다.