은은한 카드 효과를 위한 좋은 box-shadow 값은 무엇인가요?

인기 있는 은은한 카드 그림자는 두 개의 레이어를 사용합니다: 근접 그림자를 위한 0 1px 3px rgba(0,0,0,0.12)와 윤곽을 위한 0 1px 2px rgba(0,0,0,0.24)입니다. Tailwind CSS는 기본 그림자 유틸리티로 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)를 사용합니다.

CSS 박스 그림자 생성기

실시간 미리보기를 제공하는 무료 온라인 CSS box-shadow 생성기입니다. 여러 개의 그림자를 레이어링하고, 엄선된 프리셋을 선택하며, inset 모드를 전환하여 즉시 사용 가능한 코드를 복사하세요. 모든 처리는 브라우저 내에서 이루어집니다.

무료로 사용가입 필요 없음2026년 3월 업데이트

CSS 박스 그림자 생성기지금 무료로 사용하기 ▼

빠른 예시:

실시간 미리보기

↕ 드래그하여 오프셋 설정

그림자 레이어

레이어 설정

X 오프셋 px

Y 오프셋 px

흐림 (Blur) px

확산 (Spread) px

색상

불투명도 %

안쪽 그림자 (Inset)

엄선된 프리셋

생성된 CSS

CSS 박스 그림자 생성기 위젯 삽입

CSS 박스 그림자 생성기 정보

CSS 박스 그림자 생성기를 사용하면 시각적으로 box-shadow 효과를 디자인하고 즉시 프로덕션용 CSS를 복사할 수 있습니다. 여러 그림자 레이어를 쌓고, Material Design, Tailwind CSS, 뉴모피즘에서 영감을 받은 엄선된 프리셋 중에서 선택하거나, 미리보기에서 직접 드래그하여 그림자 위치를 정할 수 있습니다. 모든 작업은 브라우저 내에서 이루어지며, 사용자의 코드는 페이지를 벗어나지 않습니다.

CSS 박스 그림자 생성기 사용 방법

그림자 컨트롤 조정 — 슬라이더를 사용하여 가로 오프셋(X), 세로 오프셋(Y), 흐림 반경(Blur), 확산 반경(Spread)을 설정합니다. 미리보기 영역에서 직접 드래그하여 직관적으로 위치를 변경할 수도 있습니다.
색상 및 불투명도 선택 — 색상 선택기로 그림자 색상을 선택하고 불투명도 슬라이더로 투명도를 미세 조정합니다. 미리보기는 실시간으로 업데이트됩니다.
다중 레이어 또는 프리셋 추가 — + 그림자 레이어 추가를 클릭하여 사실적인 깊이감을 위해 그림자를 쌓으세요. 또는 이미 검증된 디자인인 엄선된 프리셋(Material, Tailwind, 뉴모피즘 등)을 선택해 시작할 수도 있습니다.
CSS 복사 — 복사 버튼을 클릭하여 생성된 box-shadow 코드를 가져와 스타일시트에 직접 붙여넣으세요.

box-shadow 구문 이해하기

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

그림자의 가로 및 세로 변위입니다. 양수 값은 오른쪽/아래로 이동하고 음수 값은 왼쪽/위로 이동합니다.

blur-radius (흐림 반경)

그림자가 얼마나 흐릿한지를 조절합니다. 0은 날카로운 경계를 만들고, 값이 클수록 더 부드럽고 확산된 그림자를 만듭니다.

spread-radius (확산 반경)

그림자를 확장하거나 수축시킵니다. 양수 값은 그림자를 크게 만들고, 음수 값은 작게 만듭니다. 요소 아래의 은은한 효과를 줄 때 유용합니다.

inset (안쪽 그림자)

이 키워드가 있으면 그림자가 요소 외부가 아닌 내부에 그려집니다. 주로 눌린 버튼이나 움푹 들어간 입력 필드에 사용됩니다.

전문가 수준의 박스 그림자를 위한 팁

여러 그림자 레이어링 — 실제 사물은 복잡한 그림자를 가집니다. 2~3개의 레이어(부드러운 주변광 레이어 + 날카로운 주광 레이어)를 사용하면 단일 그림자보다 훨씬 사실적인 결과를 얻을 수 있습니다.
낮은 불투명도 사용 — 8~20%의 불투명도를 가진 그림자가 자연스럽습니다. 너무 불투명한 검은색 그림자는 거칠고 구식처럼 보일 수 있으니 피하세요.
빛의 방향 맞추기 — 단일 광원을 시뮬레이션하기 위해 UI 전체에서 그림자 오프셋을 일관되게 유지하세요. 일관성 없는 그림자는 시각적 몰입감을 방해합니다.
유색 그림자 — 검은색 대신 요소의 배경색보다 진한 색조를 사용하면 더욱 조화롭고 현대적인 느낌을 줄 수 있습니다.
음수 확산(Negative spread) — 음수 확산 값은 그림자를 요소보다 작게 만들어, 경계선이 뚜렷하지 않으면서도 요소를 바닥에 안착시키는 듯한 은은한 접촉 그림자를 생성합니다.

자주 묻는 질문

CSS box-shadow 속성이란 무엇인가요?

CSS box-shadow 속성은 요소의 프레임 주위에 그림자 효과를 추가합니다. 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경 및 색상 값을 설정할 수 있습니다. 여러 그림자를 쉼표로 구분하여 레이어드된 깊이 효과를 만들 수 있습니다.

CSS에서 다중 박스 그림자를 어떻게 만드나요?

각 그림자 정의를 쉼표로 구분하여 여러 개의 박스 그림자를 만듭니다. 예: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). 각 그림자는 이전 그림자 위에 렌더링되며, 첫 번째 정의된 그림자가 가장 위에 나타납니다.

box-shadow와 drop-shadow의 차이점은 무엇인가요?

box-shadow는 요소의 직사각형 박스에 그림자를 적용하는 반면, filter: drop-shadow()는 투명한 영역을 포함한 실제 형태를 따라 그림자를 생성합니다. box-shadow는 drop-shadow가 지원하지 않는 확산 반경과 inset 모드를 지원합니다. 일반적인 직사각형 요소에는 box-shadow가 더 많이 사용되며 성능상 이점이 있습니다.

inset 박스 그림자란 무엇인가요?

inset 박스 그림자는 요소의 외부가 아닌 내부에 나타나는 그림자입니다. 그림자 값 앞에 inset 키워드를 추가하여 생성합니다. 주로 버튼이 눌린 효과, 입력 필드 스타일링, 오목하게 들어간 듯한 외관을 만들 때 사용됩니다.

은은한 카드 효과를 위한 적절한 box-shadow 값은 무엇인가요?

인기 있는 은은한 카드 그림자는 두 레이어를 사용합니다: 0 1px 3px rgba(0,0,0,0.12) (가까운 그림자)와 0 1px 2px rgba(0,0,0,0.24) (윤곽 정의). Tailwind CSS는 기본 그림자 유틸리티로 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)를 사용합니다.

이 콘텐츠, 페이지 또는 도구를 다음과 같이 인용하세요:

"CSS 박스 그림자 생성기" - https://MiniWebtool.com/ko/css-박스-그림자-생성기/에서 MiniWebtool 인용, https://MiniWebtool.com/

miniwebtool 팀 제작. 업데이트: 2026-03-07

개발자 API 사용 가능: 이 도구를 앱, 자동화, 에이전트에서 한 번의 JSON HTTP 요청으로 실행할 수 있습니다. API 문서 보기