박스 그림자 생성기

핵심 개념

박스 그림자 생성기는 카드 UI, 버튼, 모달에 쓰는 box-shadow를 숫자로 조율할 때 씁니다. X·Y는 그림자가 얼마나 어긋나는지, blur는 가장자리 부드러움, spread는 그림자 면적입니다. 색과 알파를 함께 두면 회색 그림자가 아니라 브랜드 색 그림자도 만들 수 있습니다. 슬라이더를 움직이는 즉시 CSS가 갱신됩니다.

inset을 켜면 그림자가 박스 안쪽으로 들어가 눌린 입력창이나 안쪽 음영에 맞습니다. 미리보기는 흰 둥근 사각형이라 밝은 배경 기준입니다. 생성은 브라우저에서만 이뤄집니다. 여러 겹 그림자는 이 화면에서 한 레이어만 만들므로, 겹치려면 복사한 값을 쉼표로 이어 붙이면 됩니다.

예시

기본값 Y 8, blur 24, 불투명도 25%면 부드러운 아래쪽 그림자가 나옵니다. X를 12, Y를 12로 올리면 오른쪽 아래 그림자가 진해지고, inset을 켜면 같은 값이 안쪽 음영으로 바뀝니다. 복사한 CSS를 선택자 안에 그대로 붙여 넣으면 됩니다. 카드 리스트는 같은 그림자를 반복해 계층을 맞추고, 모달만 더 큰 blur를 주는 식이 흔합니다. 어두운 배경에서는 알파를 조금 높여야 그림자가 보이므로 미리보기 흰 박스와 다를 수 있습니다. 복사한 선언을 미디어 쿼리 안에 넣으면 모바일에서 spread를 줄이는 식의 조정도 가능합니다. 같은 입력을 여러 번 시험할 때는 초기화 후 새로 붙여 이전 출력과 섞이지 않게 합니다. 공용 컴퓨터라면 작업이 끝난 뒤 입력란을 비워 원문이 모니터에 남지 않게 하세요. 브라우저 탭을 닫으면 방금 붙인 값도 함께 사라지며 서버에 삭제 요청을 보낼 필요는 없습니다.