CSS 박스 섀도우 생성기
무료 온라인 CSS 박스 섀도우 생성기. 라이브 미리보기로 오프셋, 흐림, 확산, 색상, 불투명도를 슬라이더로 쉽게 조정하세요.
Shadow List
Generated CSS
사용 방법
- 생성기를 열면 박스 섀도우의 실시간 미리보기를 바로 확인할 수 있습니다.
- 수평 및 수직 오프셋 슬라이더를 조정하여 그림자의 위치를 설정합니다.
- 흐림 반경과 확산 값을 설정하여 그림자의 부드러움과 크기를 제어합니다.
- 디자인에 맞는 그림자 색상과 불투명도를 선택합니다.
- 생성된 CSS 코드를 복사하여 스타일시트에 직접 붙여넣습니다.
예시
입력: 수평: 4px, 수직: 8px, 흐림: 12px, 확산: 1px, 색상: #0055aa, 불투명도: 0.5
결과: box-shadow: 4px 8px 12px 1px rgba(0, 85, 170, 0.5);
자주 묻는 질문
네, CSS Box Shadow Generator는 완전히 무료이며 회원가입이나 계정이 필요하지 않습니다.
데이터는 완전히 안전합니다. 모든 처리는 브라우저의 클라이언트 측에서 이루어집니다. 어떠한 데이터도 서버로 전송되지 않습니다.
네, CSS에서는 쉼표로 구분된 여러 box-shadow 값을 지원하여 레이어드 그림자 효과를 만들 수 있습니다.
네, box-shadow 속성은 벤더 프리픽스 없이 모든 주요 최신 브라우저에서 지원됩니다.
box-shadow 값에 'inset' 키워드를 추가하면 요소의 외부가 아닌 내부에 그림자가 적용됩니다.