Box Shadow Generator

이 도구 소개

수평 — 양수는 그림자를 오른쪽으로, 음수는 왼쪽으로 이동. 수직 — 양수는 아래로, 음수는 위로 이동. 흐림 — 값이 클수록 부드럽고 확산된 그림자 생성. 확장 — 양수는 그림자를 확장, 음수는 축소.

내부를 활성화하면 안쪽 그림자를 만듭니다. "+ 그림자 추가"를 클릭하여 여러 그림자를 추가하면 CSS 출력에 쉼표로 구분되어 앞에서 뒤 순서로 레이어됩니다.

사용 방법

1. 수평, 수직 슬라이더를 조정하여 그림자 오프셋을 설정합니다.
2. 부드러운 그림자를 원하면 흐림을 높이고, 선명한 그림자를 원하면 0으로 설정합니다.
3. 확장을 사용하여 요소 너머로 그림자 크기를 늘이거나 줄입니다.
4. "+ 그림자 추가"를 클릭하여 여러 그림자를 레이어하면 더 풍부한 효과를 냅니다.

활용 사례

디자이너는 카드 UI 컴포넌트에 깊이와 고도감을 위해 box-shadow를 사용합니다. 내부 그림자는 버튼에 눌린 또는 음각 효과를 만듭니다. 여러 겹의 그림자는 주변광과 주요광으로 사실적인 조명 효과를 만듭니다.

자주 묻는 질문

• inset 옵션이 무엇인가요? — inset 그림자는 요소 테두리 바깥이 아닌 안쪽에 나타납니다. 입력 필드와 버튼에 눌린 효과를 만드는 데 유용합니다.
• 그림자를 여러 개 추가할 수 있나요? — 네. "+ 그림자 추가"를 클릭하면 그림자 레이어가 추가됩니다. 모든 그림자는 쉼표로 구분되어 하나의 box-shadow 선언으로 결합됩니다.
• 음수 확장 값은 어떤 역할을 하나요? — 음수 확장은 그림자를 요소보다 작게 축소합니다. 오프셋과 흐림과 함께 사용하면 한쪽에서만 살짝 보이는 미묘한 그림자를 만들 수 있습니다.