Box Shadow 생성기
최대 6개의 섀도 레이어를 쌓고 각각을 독립적으로 조정한 뒤, 깔끔한 CSS 또는 Tailwind 코드를 원클릭으로 복사하세요.
Box Shadow 생성기 사용법
- 「레이어 추가」를 클릭해 최대 6개의 섀도를 쌓으세요. 목록에서 레이어를 선택해 편집합니다.
- 오프셋 X/Y로 섀도를 이동하고, 블러로 부드러움을, 스프레드로 크기를 조정합니다.
- 섀도 색상과 불투명도를 선택하고, 「인셋 섀도」를 켜면 내부 깊이 효과를 만듭니다.
- 데모 박스(색상, 배경, 모서리 반경)를 실제 컴포넌트에 맞게 꾸미세요.
- CSS 탭에서 결과를 복사하거나 Tailwind 탭에서 유틸리티 클래스를 가져오세요.
이 Box Shadow 생성기에 대해
CSS box-shadow 속성은 수평·수직 오프셋, 블러 반경, 스프레드 반경, 색상, 선택적 inset 키워드를 가진 섀도의 쉼표 구분 목록을 받습니다. 다층 섀도를 손으로 작성하는 것은 번거롭고, 값 하나의 작은 변화가 결과를 크게 바꿀 수 있습니다. 이 생성기는 모든 레이어에 독립적인 컨트롤을 제공하고 합성 결과를 실시간으로 보여줍니다.
프리셋에서 시작하세요. 은은한 「소프트」 높낮이부터 Material 스타일의 레이어드 깊이, 하드한 「엣지」 레트로 섀도, 빛나는 「네온」 효과까지. 음수 스프레드 값은 자연스럽고 사실적인 섀도에 좋습니다. 생성된 CSS는 모든 최신 브라우저에서 동작하며, Tailwind 출력은 Tailwind CSS v3+ 호환 임의값 구문을 사용합니다.
Box Shadow 자주 묻는 질문
다층 box-shadow는 어떻게 만드나요?
「레이어 추가」를 클릭해 섀도를 쌓으세요. 각 레이어는 독립적인 오프셋, 블러, 스프레드, 색상, 불투명도, 인셋 설정을 갖습니다. CSS 출력은 모든 레이어를 자동으로 쉼표로 연결합니다. 화살표 버튼으로 순서를 바꿀 수 있으며, 첫 번째 레이어가 맨 위에 렌더링됩니다.
box-shadow의 스프레드 값은 무엇을 하나요?
스프레드는 블러 전에 섀도를 확장(양수)하거나 축소(음수)합니다. 양수 스프레드는 섀도를 요소보다 크게 만들어 테두리와 네온 글로우에 유용합니다. 음수 스프레드는 섀도를 안쪽으로 당겨 큰 블러와 함께 부드럽고 자연스러운 깊이를 만듭니다.
내부(인셋) 섀도는 어떻게 만드나요?
아무 레이어에서나 「인셋 섀도」 토글을 켜세요. 인셋 섀도는 요소 내부에 렌더링되어 눌림이나 엠보싱 효과를 만듭니다. 하나의 box-shadow 선언에 인셋과 일반 레이어를 섞을 수도 있습니다.
생성된 Tailwind 클래스가 유효한가요?
네. Tailwind 출력은 shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)] 같은 임의값 구문을 사용하며 Tailwind CSS v3 이상(v4 엔진 포함)에서 설정 없이 동작합니다.
내 페이지에서 섀도가 다르게 보이는 이유는?
섀도는 요소의 크기, 보더 래디우스, 뒤 배경의 영향을 받습니다. 데모 박스 색상, 모서리 반경, 배경을 실제 컴포넌트에 맞추면 정확한 미리보기를 얻을 수 있습니다.