이 도구에 대해
box-shadow 속성은 보기보다 깊습니다: 오프셋, 흐림, 확산, 색상, inset 키워드가 서로 작용하며, 진짜 깊이는 대개 여러 그림자를 쌓는 데서 나옵니다. 이 생성기는 각 값에 슬라이더를 제공하고 여러 레이어를 추가할 수 있어, 은은한 카드 부양부터 대담한 뉴모피즘 효과까지 무엇이든 만들 수 있습니다.
모든 것이 실시간 미리보기에서 갱신되고, 완성된 box-shadow CSS는 복사 한 번이면 됩니다. 모두 브라우저에서 실행됩니다.
자주 묻는 질문
여러 개의 그림자를 겹쳐서 사용할 수 있나요?
네. 'Add Layer'를 클릭하면 그림자를 추가로 쌓을 수 있습니다 — 모두 쉼표로 구분된 하나의 box-shadow 값으로 합쳐지며, 첫 번째 레이어가 맨 위에 표시됩니다.
'inset' 체크박스는 어떤 역할을 하나요?
해당 레이어를 바깥쪽으로 떨어지는 그림자에서 요소 테두리 안쪽에 나타나는 내부 그림자로 전환합니다 — 눌린 듯하거나 움푹 들어간 효과에 유용합니다.
그림자의 투명도는 어떻게 처리되나요?
불투명도 슬라이더와 색상 선택기가 결합되어 8자리 16진수 색상(#rrggbbaa)이 만들어지며, 이를 통해 실제 알파 투명도를 얻습니다 — 색상 입력만으로는 알파 채널을 저장할 수 없기 때문입니다.
제 디자인 데이터가 어딘가에 업로드되나요?
아니요, 그림자 미리보기와 CSS 출력 모두 브라우저 안에서만 생성되며 서버에 업로드되거나 저장되지 않습니다.
spread 값을 음수로 설정하면 어떻게 되나요?
음수 spread는 블러 처리 전에 그림자의 모양을 줄여서, 그림자가 요소 자체보다 더 얇거나 타이트하게 보이도록 만들 때 흔히 사용됩니다.