CSS 그림자 만들기 (box-shadow·text-shadow)

box-shadow, text-shadow, filter: drop-shadow()를 슬라이더로 조절해 여러 겹의 그림자를 만들고 CSS를 복사합니다. 카드·버튼의 입체감, 안쪽으로 눌린 모양, 글자 외곽선처럼 자주 쓰는 그림자를 미리보기에서 확인하며 정할 때 씁니다.

사용 방법

1. '종류'에서 box-shadow, text-shadow, filter: drop-shadow 중 하나를 고릅니다.
2. '그림자 겹'의 각 겹에서 '가로 이동', '세로 이동', '흐림', '확산'(box-shadow만)과 '그림자 색', '불투명도'를 조절합니다. '안쪽'을 켜면 안쪽 그림자가 됩니다.
3. '겹 추가'나 '복제'로 겹을 늘리고 화살표로 순서를 바꿉니다. 체크를 끄면 그 겹은 잠시 빠집니다.
4. 왼쪽 미리보기에서 '배경색', '카드 색', '둥글기', '카드 크기'를 실제 화면과 비슷하게 맞춰 봅니다.
5. '프리셋'에서 출발점을 고를 수 있고, CSS 칸의 '복사'로 코드를 가져갑니다.

계산 방식과 참고

• box-shadow 한 겹은 '[inset] x y 흐림 확산 색' 순서입니다. 확산이 양수면 그림자가 커지고 음수면 작아집니다. text-shadow에는 확산과 안쪽이 없습니다.
• filter: drop-shadow()는 투명한 부분을 뺀 실제 모양(PNG 아이콘, SVG)을 따라 그림자를 만들며, 여러 개를 띄어 쓰면 겹칩니다.
• 색은 불투명하면 HEX, 아니면 rgb(r g b / a)로 적습니다. 부드러운 입체감은 불투명도가 낮은 겹을 흐림 값만 달리해 여러 개 겹치는 방법이 흔합니다.
• 겹과 미리보기 설정은 이 기기의 브라우저에 저장됩니다.

자주 묻는 질문

box-shadow 값의 순서가 어떻게 되나요?

가로 이동, 세로 이동, 흐림, 확산, 색 순서이고 안쪽 그림자는 맨 앞에 inset을 붙입니다. 예: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).

카드에 자연스러운 그림자를 주려면 어떻게 하나요?

불투명도 10~20%의 겹을 두세 개 겹치고 세로 이동과 흐림을 단계적으로 키우세요. '프리셋'의 '중간 입체'나 '부드러운 5겹'이 그 형태입니다.

text-shadow로 글자 외곽선을 만들 수 있나요?

네. 흐림 0의 그림자를 네 방향(1px 1px, -1px -1px, 1px -1px, -1px 1px)으로 겹치면 얇은 외곽선이 됩니다. '글자 외곽선' 프리셋이 그렇게 되어 있습니다.

box-shadow와 drop-shadow 필터는 무엇이 다른가요?

box-shadow는 요소의 사각형 상자에, drop-shadow 필터는 보이는 모양에 그림자를 줍니다. 투명 배경의 아이콘이나 SVG에는 drop-shadow가 맞습니다.