CSS 박스 섀도우 생성기
실시간 미리보기로 CSS 박스 섀도우를 시각적으로 생성합니다. 다중 섀도우 레이어, 인셋 섀도우 및 완전한 사용자 정의를 지원합니다.
박스 색상
테두리 반경12px
섀도우 레이어
레이어 1
X 오프셋5px
Y 오프셋5px
흐림15px
확산0px
색상
불투명도35%
CSS 코드
온라인으로 CSS 박스 섀도우를 만드는 방법
- 1.슬라이더로 섀도우 오프셋(X와 Y), 흐림 반경, 확산 반경을 조정합니다.
- 2.섀도우 색상을 선택하고 불투명도를 조정하여 원하는 효과를 만듭니다.
- 3.인셋을 전환하여 내부 섀도우를 만듭니다. + 레이어 추가를 클릭하여 여러 섀도우를 쌓습니다.
- 4.실시간으로 변화를 미리 보고 CSS 복사를 클릭하여 프로젝트에서 사용합니다.
자주 묻는 질문
box-shadow 값이란?
CSS box-shadow 속성은 offset-x, offset-y, blur-radius, spread-radius, color를 받습니다. 선택적으로 "inset" 키워드를 추가하여 내부 섀도우를 만들 수 있습니다. 예: box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.35);
여러 개의 박스 섀도우를 사용할 수 있나요?
네! CSS는 쉼표로 구분된 여러 박스 섀도우를 지원합니다. 이 도구를 사용하면 여러 섀도우 레이어를 추가하여 복잡한 섀도우 효과를 만들 수 있습니다.
흐림과 확산의 차이점은?
흐림 반경은 섀도우의 흐림 정도를 제어합니다(높을수록 부드러움). 확산 반경은 섀도우 크기를 확대 또는 축소합니다. 양수 확산은 섀도우를 크게, 음수 확산은 요소보다 작게 만듭니다.
인셋 섀도우란?
인셋 섀도우는 요소 외부가 아닌 내부에 나타납니다. 눌린 또는 내장된 효과를 만듭니다. 모든 섀도우 레이어에서 "인셋" 체크박스를 전환하여 내부 섀도우로 만들 수 있습니다.