CSS 박스 섀도우 생성기

CSS 박스 섀도우 생성기 사용 가이드

자연스러운 그림자는 대부분 한 겹이 아닙니다. 물체 바로 아래의 진하고 짧은 그림자와 멀리 퍼지는 옅은 그림자가 겹쳐야 실제처럼 보입니다. CSS box-shadow는 쉼표로 여러 겹을 이어 이런 그림자를 만들 수 있습니다.

이 생성기는 그림자 겹마다 X·Y 위치, 흐림, 퍼짐, 색, 불투명도, 안쪽 여부를 따로 조절하고 겹을 추가하거나 삭제할 수 있습니다. 값을 바꾸는 즉시 미리보기 상자와 코드가 함께 바뀝니다.

카드, 떠 있는 패널, 안쪽 그림자, 색 테두리 링 같은 프리셋으로 시작할 수 있고, 미리보기 배경을 어둡게 바꾸면 그림자가 잘 보이는지도 확인할 수 있습니다. 흐림이 너무 크거나 어두운 배경에서 그림자가 약하면 안내합니다.

사용 방법

1. 1위쪽 프리셋 버튼 중 하나로 시작합니다.
2. 2각 '그림자' 겹의 X·Y·흐림·퍼짐·색·불투명도를 조절하고, 필요하면 '안쪽(inset)'을 켭니다.
3. 3'+ 그림자 겹 추가'로 겹을 늘리거나 '삭제'로 줄입니다.
4. 4'미리보기 배경'과 '상자 모서리'를 바꿔 확인한 뒤 '코드 복사'를 누릅니다.

프리셋: 카드 (2겹)

.box {
  box-shadow:
    0px 2px 4px 0px rgba(16, 32, 28, 0.08),
    0px 12px 28px -6px rgba(16, 32, 28, 0.16);
}

이럴 때 쓰면 좋아요

• 카드나 버튼에 자연스러운 그림자를 줄 때
• 입력칸 안쪽에 눌린 듯한 그림자를 넣을 때
• outline 대신 box-shadow로 색 테두리 링을 만들 때
• 디자인 시안의 그림자 값을 CSS로 옮길 때

문제가 생겼을 때

활용 팁

• 쉼표로 이은 그림자 중 앞에 적은 것이 위에 그려집니다.
• 색 테두리 링 프리셋처럼 흐림 0, 퍼짐 3px 그림자는 레이아웃을 밀지 않는 테두리처럼 쓸 수 있습니다.
• 그림자 단계를 디자인 시스템으로 정리하려면 UI 그림자 토큰 프리셋 생성기를 함께 쓰세요.

자주 묻는 질문