CSS 박스 섀도 생성기
무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
CSS box-shadow란?
CSS box-shadow는 요소 프레임 주위에 그림자 효과를 추가하는 CSS 속성입니다. 오프셋, 블러 반경, 확산 반경 및 색상 값을 지정하여 드롭 섀도, 내부 섀도 및 여러 섀도 레이어를 만들 수 있습니다.
box-shadow의 매개변수는 무엇입니까?
box-shadow 속성은 여러 값을 허용합니다: 수평 오프셋(X), 수직 오프셋(Y), 블러 반경, 확산 반경, 색상 및 선택적 inset 키워드. 쉼표로 구분하여 여러 섀도를 지정할 수도 있습니다.
inset 키워드란?
inset 키워드는 섀도를 외부 섀도(드롭 섀도)에서 내부 섀도로 변경합니다. inset이 지정되면 섀도가 요소 테두리 바깥쪽이 아닌 안쪽에 그려져 인세트 효과를 생성합니다.
블러 반경이란?
블러 반경은 섀도 가장자리가 얼마나 흐려지는지를 결정합니다. 값 0은 날카롭고 단단한 가장자리를 만듭니다. 더 큰 값은 요소에서 더 멀리 확장되는 더 확산되고 부드러운 섀도를 만듭니다.
확산 반경이란?
확산 반경은 섀도 크기를 확장하거나 축소합니다. 양수 값은 섀도를 요소보다 크게 만들고, 음수 값은 작게 만듭니다. 이는 블러가 적용되기 전 섀도에 영향을 미칩니다.
여러 섀도를 어떻게 만듭니까?
각 섀도 정의를 쉼표로 구분하여 여러 섀도를 만들 수 있습니다. 각 섀도는 다른 오프셋, 블러, 확산 및 색상 값을 가질 수 있습니다. 섀도는 선언된 순서대로 적용되며, 첫 번째 섀도가 맨 위에 있습니다.
섀도에 RGBA 색상을 사용할 수 있습니까?
네, RGBA, HSLA, HEX 또는 이름 지정 색상을 포함한 모든 CSS 색상 형식을 사용할 수 있습니다. RGBA와 HSLA는 배경과 자연스럽게 혼합되는 반투명 섀도를 만드는 데 특히 유용합니다.
생성된 CSS 코드를 어떻게 복사합니까?
생성기 인터페이스에서 "코드 복사" 버튼을 클릭하기만 하면 됩니다. CSS 코드가 클립보드에 복사되어 스타일시트나 HTML 파일에 직접 붙여넣을 수 있습니다.
box-shadow는 모든 브라우저에서 지원됩니까?
네, box-shadow는 Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 모던 브라우저에서 지원됩니다. 2011년부터 CSS3의 일부였으며 뛰어난 브라우저 호환성을 가지고 있습니다.
box-shadow가 성능에 영향을 미칩니까?
box-shadow는 모던 브라우저의 성능에 최소한의 영향을 미칩니다. 그러나 많은 요소에서 큰 블러 반경을 가진 여러 복잡한 섀도를 사용하면 렌더링 성능에 영향을 줄 수 있습니다, 특히 모바일 장치에서.
box-shadow의 일반적인 사용 사례는 무엇입니까?
일반적인 사용법에는 카드 높이 효과 생성, 버튼에 깊이 추가, 인세트 양식 필드 생성, 머티리얼 디자인 섀도 구현 및 겹치는 요소 사이의 시각적 분리를 추가하는 것이 포함됩니다.
box-shadow를 애니메이션화할 수 있습니까?
네, box-shadow는 CSS 트랜지션 또는 애니메이션을 사용하여 애니메이션화할 수 있습니다. 그러나 box-shadow 애니메이션화는 성능 집약적일 수 있습니다. 더 나은 성능을 위해 불투명도 트랜지션과 함께 의사 요소를 사용하는 것을 고려하십시오.
CSS 박스 섀도 생성기 사용 방법
값을 감으로 맞추지 말고 이 도구로 CSS box-shadow를 시각적으로 디자인하세요. 생성기는 브라우저에서 로컬로 실행되며 입력한 내용은 업로드되지 않습니다.
- H-Offset와 V-Offset를 조절해 그림자를 가로세로로 이동시킵니다.
- Blur를 높이면 가장자리가 부드러워지고, Spread로 그림자 크기를 키우거나 줄일 수 있습니다.
- Color를 고르고 Opacity를 조정하면 더 자연스러운 그림자가 됩니다.
- Inset에 체크하면 그림자가 요소 안쪽에 그려집니다.
- 미리보기에서 완성된 box-shadow 규칙을 복사해 스타일시트에 붙여넣습니다.
Blur를 작게 하고 V-Offset을 약간 양수로 두면 요소 바로 아래에 은은하고 사실적인 접촉 그림자가 만들어집니다.
관련 도구
- CSS Border Radius 생성기 시각적 CSS border-radius 생성기. 각 모서리를 독립적으로 조정하고 실시간 미리보기로 CSS 코드를 즉시 복사하세요.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- CSS Grid 생성기 라이브 미리보기가 있는 무료 시각적 CSS Grid 생성기. 반응형 그리드 레이아웃을 대화형으로 설계하고 프로덕션용 CSS 코드를 즉시 내보내세요.
- CSS Flexbox 생성기 라이브 미리보기가 있는 시각적 CSS Flexbox 생성기. Flex 속성을 조정하고 바로 사용할 수 있는 CSS 코드를 얻으세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.