CSS Box Shadow 생성기
실시간 미리보기를 통해 시각적으로 box-shadow 효과를 디자인하세요. 여러 그림자 레이어를 추가하고, 모든 매개변수를 조정하고, CSS 코드를 복사하세요.
미리보기
그림자 레이어
CSS 코드
복사됨!
CSS Box Shadow 생성기란 무엇인가요?
CSS box-shadow 생성기는 코드를 직접 작성하지 않고도 HTML 요소에 대한 그림자 효과를 만들 수 있도록 도와줍니다. 시각적 컨트롤을 사용하여 가로/세로 오프셋, 블러 반경, 스프레드, 색상 및 불투명도와 같은 매개변수를 조정하면 도구가 정확한 CSS 속성 값을 생성해 줍니다.
Box Shadow 생성 방법
- 오프셋 조정 — X 및 Y 슬라이더를 사용하여 그림자 위치를 지정하세요.
- 블러 및 스프레드 설정 — 그림자의 부드러움과 크기를 제어하세요.
- 색상 선택 — 그림자 색상을 선택하고 불투명도를 조정하세요.
- 내부 그림자 전환 — 외부 및 내부 그림자 간에 전환하세요.
- 레이어 추가 — 복잡한 효과를 위해 여러 그림자를 쌓으세요.
- CSS 복사 — 복사 버튼을 클릭하여 최종 코드를 가져오세요.
이 Box Shadow 생성기를 사용하는 이유는 무엇인가요?
- 시각적 편집 — 미리보기 상자에서 그림자 변경 사항을 실시간으로 확인하세요.
- 다중 레이어 — 깊이 효과를 위해 최대 5개의 그림자 레이어를 결합하세요.
- 정밀한 제어 — 오프셋, 블러, 스프레드, 불투명도 및 내부 그림자를 독립적으로 미세 조정하세요.
- 깔끔한 출력 — 스타일시트에 붙여넣을 준비가 된 올바르게 포맷된 CSS를 얻으세요.
- 개인 정보 보호 — 모든 것이 브라우저에서 로컬로 실행됩니다.
FreeToolbox vs 다른 Shadow 생성기
| 기능 | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| 다중 레이어 | 최대 5개 | 단일 | 무제한 |
| 내부 그림자 전환 | 예 | 예 | 아니요 |
| 불투명도 제어 | 예 | 제한적 | 예 |
| 광고 | 최소 | 많음 | 없음 |
| 다크 테마 | 예 | 아니요 | 예 |
자주 묻는 질문
블러와 스프레드의 차이점은 무엇인가요?
블러는 그림자 가장자리가 얼마나 부드럽고 흐릿한지를 제어합니다. 스프레드는 그림자가 요소의 크기에서 얼마나 확장되거나 축소되는지를 제어합니다. 양수 스프레드는 그림자를 더 크게 만들고, 음수 스프레드는 더 작게 만듭니다.
여러 그림자를 추가할 수 있나요?
예. '레이어 추가'를 클릭하여 최대 5개의 그림자 레이어를 쌓으세요. 각 레이어에는 모든 매개변수에 대한 독립적인 컨트롤이 있습니다.
내부 그림자는 무엇을 하나요?
내부 그림자는 그림자를 외부 대신 요소 내부로 이동시켜 내부 그림자 또는 눌린 효과를 만듭니다.
텍스트 그림자에도 작동하나요?
이 도구는 box-shadow CSS를 생성합니다. 텍스트 그림자는 유사한 구문을 사용하지만 스프레드 값이나 내부 그림자 옵션은 없습니다. 출력을 수동으로 조정할 수 있습니다.
이 도구는 무료인가요?
예, 제한이나 등록 없이 완전 무료입니다.