언제 유용한가요?
카드나 버튼에 입체감을 주고 싶을 때, 값을 하나씩 조절하며 그림자가 어떻게 달라지는지 눈으로 바로 확인하고 싶을 때 유용합니다.
Box-Shadow Generator
Tune shadow values and copy pure CSS.
Shadow
사용 가이드
Box-Shadow 생성기 사용 가이드
Box-Shadow 생성기는 X축, Y축, 블러, 퍼짐, 투명도 슬라이더를 움직이는 즉시 순수 CSS box-shadow 코드를 만들어 보여주는 도구입니다.
사용 방법
- X축, Y축 슬라이더로 그림자의 위치를 정합니다.
- 블러와 퍼짐 슬라이더로 그림자의 번짐 정도와 크기를 조절합니다.
- 생성된 box-shadow 코드를 복사해 CSS에 붙여넣습니다.
알아두면 좋은 점
블러 값이 클수록 그림자의 경계가 부드럽게 퍼지고, 퍼짐(spread) 값은 양수면 그림자가 커지고 음수면 원래 요소보다 작아집니다. 투명도를 낮추면 더 은은한 그림자를 만들 수 있습니다.
데이터 처리 안내
모든 계산은 브라우저 안에서 즉시 처리되며 별도의 서버 요청이나 저장 없이 결과를 바로 확인할 수 있습니다.
자주 묻는 질문
그림자를 여러 겹 넣을 수 있나요?
이 도구는 한 겹의 box-shadow 값을 만드는 데 초점을 맞췄습니다. 여러 겹을 쌓고 싶다면 생성된 코드를 복사한 뒤 쉼표로 이어 직접 조합하면 됩니다.
안쪽 그림자(inset)도 만들 수 있나요?
아니요, 현재는 바깥쪽 그림자만 생성합니다. 안쪽 그림자가 필요하면 생성된 코드 맨 앞에 inset 키워드를 직접 추가하면 됩니다.