CSS Box Shadow 생성기
오프셋, 흐림, 확산, 색상, 불투명도 및 내부 그림자를 위한 실시간 슬라이더로 레이어드 CSS box-shadow를 만들어 보세요 — 실제 요소에서 미리 보고 즉시 복사 가능한 CSS를 받으세요.
실시간 미리보기
실시간 미리보기
CSS
box-shadow: —;
모든 기능이 브라우저에서 실시간으로 업데이트됩니다 — 업로드 없음, 회원가입 불필요, 완전히 무료입니다.
그림자 레이어
px
px
px
px
그림자 색상
20%
요소 및 캔버스
16px
프리셋
CSS Box Shadow 생성기 소개
CSS 박스 섀도우 생성기를 사용하면 코드에서 값을 추측하는 대신 시각적으로 박스 섀도우를 디자인할 수 있습니다. 가로/세로 오프셋, 블러 반경, 확산 반경, 색상, 불투명도를 슬라이더로 조절하고 — 인셋 토글도 있습니다 — 실제 요소가 실시간으로 업데이트되는 것을 확인하세요. 원하는 결과가 나오면 클릭 한 번으로 바로 붙여넣을 수 있는 CSS를 복사하세요.
최신 UI 섀도우는 단일 레이어로 끝나는 경우가 드뭅니다. 이 생성기는 레이어를 겹쳐 쌓을 수 있도록 지원합니다: 레이어를 추가, 복제, 숨기기 또는 제거하고, 선택한 레이어만 또는 전체 레이어를 함께 미리보기할 수 있습니다. 부드럽고 넓은 섀도우 아래에 좁고 진한 섀도우를 겹치는 것이 세련된 카드와 버튼에 깊이감을 주는 방법입니다.
미리보기 요소 자체도 스타일링할 수 있습니다 — 박스 색상, 테두리 반경, 캔버스 배경까지 — 어두운 표면을 포함한 실제 환경에서 섀도우를 판단할 수 있도록 말이죠. 프리셋에서 시작하거나 “레이어 무작위화”로 영감을 얻고, 원할 때마다 초기화하세요. 모든 것이 브라우저에서 동작합니다.
CSS Box Shadow 생성기 사용 방법
- 가로 오프셋, 세로 오프셋, 블러, 확산, 색상, 불투명도 슬라이더를 조절하고, 내부 그림자가 필요하면 “인셋 섀도우”를 켭니다.
- “레이어 추가” 또는 “레이어 복제”를 클릭해 섀도우를 겹치고, 미리보기 모드를 “이 레이어”와 “전체 레이어” 사이에서 전환하며 각각을 세밀하게 조정합니다.
- 박스 색상, 테두리 반경, 배경 등 요소와 캔버스를 조정해 실제 디자인과 맞는 미리보기를 만듭니다.
- 빈 슬라이더 상태 대신 시작점이 필요하면 프리셋을 적용하거나 “레이어 무작위화”를 사용합니다.
- 전체 CSS 규칙(또는 값만)을 복사해 스타일시트에 붙여넣습니다.
자주 묻는 질문
블러는 섀도우의 가장자리를 부드럽게 합니다 — 블러 반경이 커질수록 섀도우가 더 흐릿해집니다. 확산은 블러 처리 전에 섀도우의 크기를 키우거나 줄입니다: 양수 값은 요소 너머로 확장하고, 음수 값은 안쪽으로 당겨 더 좁은 섀도우를 만듭니다.
현실적인 깊이감에는 보통 최소 두 개의 섀도우가 필요합니다: 접촉감을 주는 요소에 가까운 작고 진한 섀도우, 그리고 주변광을 표현하는 크고 부드럽고 투명한 섀도우입니다. 생성기는 몇 개의 레이어든 쌓아서 쉼표로 구분된 하나의 box-shadow 값으로 만들어 줍니다.
인셋 섀도우는 요소 뒤가 아니라 안쪽에 그려지며, 표면이 눌리거나 움푹 들어간 것처럼 보이게 만듭니다. 입력 필드, 우물형 요소, 눌린 버튼 상태에 흔히 사용됩니다.
네. 요소와 캔버스 컨트롤로 박스 색상, 테두리 반경, 캔버스 배경을 바꿀 수 있으므로, CSS를 복사하기 전에 어두운 표면에서도 섀도우가 제대로 보이는지 확인할 수 있습니다.
네, 완전 무료입니다. 미리보기와 생성된 CSS는 브라우저에서 실시간으로 계산되며, 가입도 필요 없고 만들 수 있는 섀도우 개수에도 제한이 없습니다.
인기 검색어
css box shadow 생성
box shadow css
그림자 생성 온라인
css 그림자 만들기
다중 box shadow
inset shadow css
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.