작업 경로 / 입력에서 결과까지
CSS 박스 그림자를 만드는 방법
- 01
그림자 위치 잡기
「수평 오프셋」과 「수직 오프셋」을 각각 -80~80 px 사이에서 설정하세요. 음수 값은 그림자를 왼쪽이나 위로 밀고, 0이면 카드 뒤에 중앙 배치됩니다. 처음 열리는 값은 오른쪽 12 px, 아래 18 px로, 고전적인 드롭 섀도 배치입니다.
- 02
블러와 확산 조절하기
「블러 반경」을 0~120 px 사이에서 조절해 부드러움을 정하고(기본값 32 px), 「확산 반경」을 -40~60 px 사이에서 조절해 블러가 적용되기 전에 그림자를 키우거나 줄이세요. 기본 확산값 -4 px는 그림자를 살짝 조여 가장자리를 더 선명하게 합니다.
- 03
색상과 불투명도 설정하기
6자리 「그림자 색상」을 고르고(기본값 #0b0d12는 거의 검정에 가까워요), 「그림자 불투명도」를 0.01 단위로 0~1 사이에서 설정하세요. 불투명도는 출력의 rgba() 색상 알파 채널이 되므로, 0.28은 rgba(11, 13, 18, 0.28)로 렌더링됩니다.
- 04
내부 모드 전환하기
「내부 그림자」를 켜면 그림자가 박스 안쪽으로 들어가 눌리거나 움푹 들어간 표면처럼 보여요. 입력 필드나 토글된 버튼에 유용합니다. 토글이 켜져 있으면 생성되는 선언 맨 앞에 inset 키워드가 붙어요.
- 05
샘플과 비교하기
「샘플 불러오기」를 누륩면 선명한 참고 스타일(양축 8 px 오프셋, 블러와 확산 모두 0, #0f4cff, 불투명도 0.35의 딱딱한 오프셋 외곽선)이 채워져요. 「초기화」는 부드러운 기본 그림자로 되돌리고, 실시간 미리보기는 변경할 때마다 다시 렌더링됩니다.
- 06
CSS 복사 또는 다운로드하기
「CSS 복사」를 눌러 .shadow-card 규칙을 복사하거나, 「.css 다운로드」를 눌러 toolars-box-shadow.css로 저장하세요. 값이 범위를 벗어난 동안에는 복사가 차단되므로, 붙여 넣는 선언은 항상 유효합니다.