CSS 박스 그림자 생성기: 실시간 미리보기, 코드 복사

CSS 상자 그림자 생성기

이 생성기는 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경, 자체 불투명도 슬라이더가 있는 그림자 색상, 그리고 inset(안쪽) 전환이라는 여섯 가지 설정으로 하나의 CSS box-shadow 값을 만듭니다. 두 개의 추가 색상 선택기가 미리보기 상자와 배경을 설정해 밝은 배경과 어두운 배경 모두에서 그림자가 잘 보이는지 확인할 수 있고, soft, hard, glow, inset이라는 네 가지 프리셋은 클릭 한 번으로 완성된 조합을 불러옵니다. 값을 바꿀 때마다 미리보기 아래의 box-shadow 줄이 즉시 갱신되어 바로 복사할 수 있습니다.

box-shadow 값이 만들어지는 방식

CSS는 그림자를 정해진 순서의 숫자로 씁니다. 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경, 그다음 색상 순서이며, 그림자를 상자 뒤가 아니라 테두리 안쪽에 그리려면 앞에 inset이라는 단어가 붙습니다. 가로와 세로 오프셋은 그림자를 옆으로나 위아래로 옮기며 둘 다 -50px까지 음수 값을 받아들이므로 그림자가 상자 왼쪽으로 떨어지거나 위쪽에 놓일 수도 있습니다. 흐림 반경은 0에서 100px 사이에서 그림자의 가장자리를 부드럽게 만들고, 확산 반경은 -50에서 50px 사이에서 상자 자체 크기와 무관하게 그림자를 키우거나 줄입니다. 색상 선택기의 16진값은 빨강, 초록, 파랑 성분으로 나뉘고, 0에서 1 사이의 불투명도 슬라이더는 rgba() 안의 네 번째 값이 됩니다. 0이면 그림자가 완전히 투명해지고, 1이면 선택한 색상과 정확히 같아집니다. 상자 색상과 배경 색상을 정하는 두 개의 선택기는 미리보기에만 영향을 주며, 복사되는 box-shadow 값 자체에는 반영되지 않습니다.

계산 예시

가로 오프셋을 -4px, 세로 오프셋을 8px, 흐림을 16px, 확산을 -3px로 설정하고 그림자 색상을 #ea580c, 불투명도를 0.35로 두면 box-shadow: -4px 8px 16px -3px rgba(234, 88, 12, 0.35)라는 결과가 나옵니다. 16진 코드 #ea580c는 빨강 234, 초록 88, 파랑 12로 나뉘고, 불투명도 슬라이더의 0.35는 추가 변환 없이 그대로 rgba()의 네 번째 값이 됩니다. 같은 여섯 값에서 inset을 켜면 동일한 그림자가 상자 뒤가 아니라 테두리 안쪽에 그려지며, 눌린 버튼이나 오목한 입력 필드 효과에 자주 쓰입니다. soft, hard, glow, inset 네 프리셋은 이렇게 값을 하나씩 조정하는 대신 미리 만들어진 조합을 바로 불러오는 지름길입니다.

복사용 CSS 출력

.card {
  box-shadow: -4px 8px 16px -3px rgba(234, 88, 12, 0.35);
}