CSS Box-Shadow 생성기

CSS `box-shadow` 속성은 HTML 요소에 하나 이상의 그림자 효과를 추가합니다. 각 그림자는 선택적 `inset` 키워드, 수평 오프셋, 수직 오프셋, 블러 반경, 스프레드 반경, 색상 등 최대 6개의 값으로 정의됩니다. 양수 수평 오프셋은 그림자를 오른쪽으로, 양수 수직 오프셋은 아래쪽으로 이동시킵니다. 여러 그림자는 쉼표로 구분되며 앞에서 뒤로 렌더링됩니다. 이미지 없이 UI 컴포넌트에 시각적 깊이, 엘리베이션 계층, 글로우 효과, 뉴모피즘 스타일을 추가하는 CSS의 주요 메커니즘입니다.

전체 문법은 `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`입니다. `offset-x`, `offset-y`, `color`만 필수이며, `blur-radius`와 `spread-radius`는 생략 시 0이 기본값이고 `inset`은 외부 그림자가 기본입니다. 일반적인 카드 그림자는 `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`와 같습니다. 쉼표로 구분하여 무제한 그림자를 쌓을 수 있으며, 앞에서 뒤로 렌더링됩니다(첫 번째가 맨 위). 이 생성기는 `box-shadow:` 속성 이름을 포함한 전체 선언 또는 원하는 경우 값만 출력합니다.

블러 반경은 가장자리 부드러움을 제어합니다. 0은 요소 모양과 정확히 일치하는 선명하고 또렷한 가장자리를 만들고, 값이 클수록 점점 더 부드럽고 확산된 페이드를 만듭니다. 스프레드 반경은 블러가 적용되기 전에 전체 그림자를 확장하거나 축소합니다. 양수 값은 요소 경계를 넘어 확장하고, 음수 값은 안쪽으로 수축시킵니다. 가장 사실적으로 보이는 그림자는 적당한 블러와 약간 음수인 스프레드를 사용하여 그림자를 너무 넓게 퍼뜨리지 않고 요소의 발자국에 가깝게 유지합니다. 이것이 Deep 및 Floating 프리셋에서 사용되는 기법입니다.

그림자 선언의 시작 부분에 `inset` 키워드를 추가하세요: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. inset 그림자는 요소 뒤가 아닌 테두리 박스 내부에 그려져 오목하거나 눌린 외관을 만듭니다. 일반적인 사용법: 입력 필드(포커스 깊이 표시), 토글 스위치 트랙, 누름 버튼 활성 상태, 엠보싱 텍스트 컨테이너 등입니다. 이 생성기는 모든 레이어 컨트롤 패널에 Inset 토글이 있습니다. 활성화하면 미리보기 요소에서 그림자가 즉시 내부로 전환됩니다.

네. CSS는 단일 요소에 쉼표로 구분된 원하는 수의 그림자를 허용합니다. 나열된 순서대로 렌더링되며 첫 번째 그림자가 맨 위에 옵니다. 여러 레이어를 쌓는 것이 부드럽고 사실적인 깊이를 위한 핵심 기법입니다. 단일 큰 그림자는 인위적으로 보이지만, 3~5개의 점진적 레이어는 빛이 물리적으로 산란하는 방식을 모방합니다. 이 생성기는 각각 고유한 오프셋, 블러, 스프레드, 색상, 불투명도, inset 토글을 가진 최대 8개의 독립적인 레이어를 지원합니다. 눈 아이콘으로 삭제하지 않고도 개별 레이어를 표시/숨기기하여 빠른 전후 비교가 가능합니다.

뉴모피즘은 배경색과 일치하는 요소에 두 개의 반대 그림자를 사용합니다. 하나는 왼쪽 상단을 향하는 밝은(거의 흰색) 그림자, 하나는 오른쪽 하단을 향하는 어두운(낮은 불투명도의 검정) 그림자입니다. 이렇게 하면 요소가 배경 표면에서 돌출된 것처럼 보입니다. 기본 뉴모피즘 선언: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. 환상이 작동하려면 요소의 배경이 페이지 배경과 정확히 일치해야 합니다. 이 생성기의 Neumorphic 프리셋은 즉시 사용 가능한 시작점을 제공합니다. 미리보기 배경을 '소프트 그레이'로 전환하면 맥락에서 확인할 수 있습니다.

오프셋 0, 큰 블러 반경, 색상 값을 사용하세요: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. 오프셋 0은 모든 방향으로 균등하게 글로우를 방사시킵니다. 양수 스프레드는 요소에서 더 멀리 글로우를 밀어냅니다. 두 레이어를 결합하면 더욱 설득력 있는 발광 효과를 만들 수 있습니다. 하나는 밝은 코어를 위한 작은 블러와 높은 불투명도, 다른 하나는 주변 헤일로를 위한 큰 블러와 낮은 불투명도입니다. Glow Blue 프리셋이 이 2레이어 접근 방식을 보여줍니다. 브랜드에 맞는 커스텀 액센트 글로우를 위해 색상을 변경하세요.

하나의 큰 그림자 대신 각 레이어가 대략 오프셋과 블러를 두 배로 늘리면서 불투명도를 절반으로 줄이는 3~5개의 레이어를 쌓으세요. 예: `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. 이 기법은 점광원에서 빛이 물리적으로 산란하는 방식을 모방하며 어떤 줌 레벨이나 디스플레이 해상도에서도 설득력 있게 보입니다. 이 생성기의 Deep 및 Floating 프리셋은 정확히 이 원칙을 기반으로 제작되었습니다. 어떤 크기에서도 자연스럽게 보이는 3개의 점진적 레이어입니다.

`box-shadow`는 요소가 시각적으로 어떻게 보이는지와 관계없이 항상 요소의 직사각형 테두리 박스를 따릅니다. `filter: drop-shadow()`는 요소의 실제 알파 채널 실루엣을 추적합니다. 투명한 PNG 컷아웃이나 경계 사각형이 아닌 모양을 따르는 그림자를 원하는 SVG 아이콘에 유용합니다. 표준 UI 컴포넌트(카드, 버튼, 패널, 다이얼로그)에는 `box-shadow`가 올바른 선택입니다. 더 빠르게 그려지고, inset 모드를 지원하며, 스프레드 반경을 허용하고, 여러 겹친 레이어를 허용합니다. 요소의 투명한 배경이 그림자 모양에 중요한 경우에만 `filter: drop-shadow()`를 사용하세요.

아니요. `box-shadow`는 일반 레이아웃 흐름 밖에서 렌더링되는 순수한 시각 효과입니다. 형제 요소를 밀지 않고, 스크롤 가능한 콘텐츠 영역을 늘리지 않으며, 요소의 계산된 너비, 높이, 마진, 패딩에 영향을 미치지 않습니다. 그림자는 요소 박스 너머로 시각적으로 확장되지만 레이아웃 엔진에서는 무시됩니다. 즉, 레이아웃을 깨지 않고 빡빡하게 배치된 그리드에 넉넉한 그림자를 추가할 수 있습니다. 다만 그림자가 잘리지 않도록 부모 컨테이너에 `overflow: visible`을 추가하는 것이 좋을 수 있습니다.

그림자를 완성하면 생성기는 세 가지 출력 형식을 제공합니다. <strong>CSS 복사</strong>는 모든 스타일시트에 바로 사용 가능한 전체 속성 선언(`box-shadow: …;`)을 제공합니다. <strong>값 복사</strong>는 그림자 값만 제공합니다. SCSS 변수, CSS 커스텀 속성 값, 또는 Tailwind `extend.boxShadow` 항목으로 유용합니다. <strong>React 스타일</strong>은 JSX 인라인 스타일 객체나 Styled Components용 카멜케이스 형식(`boxShadow: '…'`)을 출력합니다. Tailwind의 경우, `tailwind.config.js`의 `theme.extend.boxShadow` 아래에 값을 붙여넣어 커스텀 그림자 유틸리티 클래스를 만드세요.

대부분의 전용 박스 섀도우 도구는 단일 레이어 생성만 제공합니다. cssgenerator.org는 기본 컨트롤을 제공하지만 프리셋 라이브러리와 다중 레이어 스태킹이 없습니다. css-tricks.com 레퍼런스는 문서이지 인터랙티브 도구가 아닙니다. cssmatic.com의 CSS 생성기는 기능적이지만 오래되고 광고가 많습니다. UtiloKit 생성기는 레이어별 눈 토글이 있는 최대 8개의 독립적인 레이어, 가장 일반적인 그림자 디자인 패턴을 다루는 8가지 엄선된 프리셋(카드, 선명, 머티리얼, 뉴모피즘, 플로팅, 딥, 글로우, 인셋 웰), 다양한 프레임워크를 위한 세 가지 출력 형식, 대비 확인을 위한 완전한 다크/라이트 배경 전환을 지원합니다. 모두 광고 없이, 데이터 업로드 없이 제공됩니다.

네. 박스 섀도우 생성기는 완전히 반응형입니다. 아이폰과 안드로이드에서 모든 슬라이더는 적절한 크기의 드래그 핸들로 터치 친화적입니다. 실시간 미리보기 요소는 모바일 화면에 맞게 크기가 조정됩니다. 색상 선택기는 모바일 브라우저에서 네이티브 시스템 색상 선택기를 사용합니다. 3열 데스크톱 레이아웃은 좁은 화면에서 깔끔한 단일 열 세로 레이아웃으로 축소됩니다. 모든 복사 버튼은 iOS와 Android의 Safari, Chrome, Firefox에서 지원되는 Web Clipboard API를 사용합니다. 앱 다운로드 불필요, 계정 불필요. URL을 열고 바로 시작하세요.