CSS 박스 그림자 생성기
카드나 버튼에 어울리는 그림자를 숫자와 색상으로 조절하는 도구입니다. 가로·세로 위치, 흐림과 확산, 불투명도를 바꾸면 오른쪽 미리보기에 즉시 반영됩니다. 실행을 누르면 한 겹의 box-shadow와 border-radius 선언을 복사할 수 있습니다.
주요 기능
- 외부 그림자와 inset 내부 그림자 전환
- 가로·세로 -100~100px, 흐림 0~100px, 확산 -50~50px 조절
- 6자리 HEX 색상과 0~100% 불투명도 입력
- 모서리 반경과 실제 CSS 미리보기 확인
사용 방법
- 가로·세로 위치와 흐림, 확산 값을 입력합니다.
- 색상과 불투명도를 선택하고 내부 그림자 여부를 정합니다.
- 미리보기를 확인한 뒤 실행을 눌러 CSS를 생성하고 복사합니다.
활용 예시
- 카드 목록에 사용할 부드러운 외부 그림자 만들기
- 입력창이나 눌린 버튼에 사용할 inset 효과 비교
- 디자인 시안의 그림자 값을 CSS 선언으로 정리
자주 묻는 질문
흐림과 확산의 차이는 무엇인가요?
흐림은 그림자 가장자리를 부드럽게 만듭니다. 확산은 흐림을 적용하기 전 그림자의 크기를 늘리거나 줄이며, 음수 값으로 그림자를 안쪽으로 줄일 수 있습니다.
그림자를 여러 겹 만들 수 있나요?
이 도구는 한 겹의 그림자를 생성합니다. 여러 겹이 필요하면 각각 만든 box-shadow 값을 쉼표로 연결하여 대상 스타일에 적용하세요.
미리보기와 실제 사이트가 다르게 보일 수 있나요?
배경색, 요소 크기와 주변 여백에 따라 인상이 달라집니다. 미리보기는 밝은 체크무늬 배경 위 흰색 샘플이므로 최종 화면에서도 확인하세요.
숫자 범위와 소수점은 어떻게 처리하나요?
각 입력에 표시된 범위 안에서 소수도 사용할 수 있습니다. 값은 소수 둘째 자리로 정리되며, 빈 값이나 범위를 벗어난 값은 오류로 안내합니다.
개인정보 안내
CSS 계산과 미리보기는 이 브라우저에서 처리하며 입력값을 변환용 서버로 전송하지 않습니다. 결과는 파일이나 계정에 자동 저장되지 않습니다.
참고 자료
관련 도구
CSS 그라데이션 생성기색상 코드 변환기CSS MinifierWebAssembly 모듈 검사기다국어 연결 행렬 검사기구문 트리 질의 실험실컨테이너 빌드 단계 분석기의존성 그래프 탐색기버전 제약 충돌 분석기작업 스케줄 충돌 검사기패치 검토 작업대소스맵 탐색기다국어 카탈로그 검사기구조화 데이터 대조기HTTP 아카이브 분석기웹훅 서명 실험실Protobuf 스키마 작업대GraphQL 스키마 실험실Avro 스키마 호환성 검사기로컬 SQL 데이터 작업대스키마 기반 입력 폼 생성기3D 메쉬 검사·복구기관망 유량·압력 실험실로봇팔 운동학 실험열저항 회로 실험실보 휨 실험실기어열 배치 실험공차 누적 실험실센서 교정 곡선 맞추기PCB 적층 비교 설계기디지털 필터 설계기도로망 도달 범위 지도태양 그림자 배치 실험GPS 오차 시뮬레이터디지털 논리 회로 실험아날로그 회로 실험실링크 기구 운동 실험해석용 메쉬 생성기OpenAPI 계약 검사기DB 스키마 변경 계획기수식 차원 검사기트러스 힘 실험실논리식 최소화 실험실제어계 응답 실험실대기행렬 시뮬레이터위치 구역 출입 이벤트 실험실좌표계 변환 실험실측량 폐합 검산 실험실위성·래스터 구간 분류단계구분도 설계기지도 인쇄 편집기GeoTIFF 래스터 재투영고도 등고선 생성기지형 가시영역 실험실지형 유역 탐색기오프라인 지도 타일 패키저텍스트 파일 인코딩 작업대파일 경로 호환성 검사기SBOM 라이선스 탐색기파일 형식 위장 검사기npm 잠금 파일 충돌 해결기소스 비밀값 점검기오프라인 웹 자료 패키저인증서 체인 검사기토렌트 메타정보 검사기파일 분할 전송 패키저로컬 파일 암호 금고동일 파일 찾기압축 파일 작업대디자인 토큰 관리기반응형 간격 체계 설계기반응형 타이포 시스템 설계기포장 전개도 설계기SVG 아이콘 스프라이트 묶기Flexbox 배치 설계기CSS Grid 배치 설계기정규 언어 동치 검사기Markdown 문서 묶음 검사기로그 패턴 추출기반응형 HTML 레이아웃 검사기메일 HTML 렌더 검토기내부 링크 구조 분석기상태 전이 모델 테스트 생성기페트리넷 흐름 실험Git 이력 그래프 탐색기HTTP 요청 명령 설계기바이너리 프로토콜 설계기바이너리 Hex 편집기바이너리 차이 패치 만들기파일 전자서명 작업대API 모의 응답 실험실데이터 열 매핑 설계기이벤트 로그 세션 분석기데이터베이스 관계도 설계기시계열 누락 검사기학습 데이터 분할기데이터 흐름 계보 작성기결정트리 학습 실험실데이터 비식별 처리기데이터 계약 규칙 검사기JSON Schema 검증기항목 동시출현 분석기robots 규칙 시뮬레이터HTML 검색 기본 검사기접근성 구조 검사기RSS·Atom 피드 작성기IndexNow 배포 알림 준비기검색 로봇 로그 분석기CSP 정책 검토기검색 실적 CSV 분석기CSV 수식 위험 검사기CORS 응답 시뮬레이터HTTP 캐시 동작 실험실쿠키 속성 검사기성능 추적 파일 분석기사이트맵 구조 검사기파일 일괄 이름 바꾸기파일 묶음 무결성 검증기폴더 용량 지도폴더 차이 검토기방문 순서 최적화GeoJSON 지도 편집기지도 영역 중첩 분석기지도 라벨 배치기공간 속성 결합기GeoJSON 공간 위상 검사기GPS 이동 기록 분석기이동 기록 위치 가림표 관계 결합기피벗 테이블 작업대데이터 품질 프로파일러표 데이터 정제 작업대기록 대사 도구데이터 사전 작성기canonical 관계 검사기리다이렉트 계획 검증기HTTP 응답 속도·핑 참고 테스트내 브라우저·시스템 정보JSON ↔ YAML 변환기XML ↔ JSON 변환기HTML 포맷터JavaScript 압축기목 데이터 생성기.gitignore 생성기라이선스 생성기User-Agent 분석기비밀번호 강도 검사코드 이미지 만들기XML 포맷터HTTP 상태 코드 찾기MIME 타입 찾기JS·SQL 문자열 이스케이프들여쓰기 변환기진법 변환기유니코드 이스케이프 변환기유니코드 문자 분석기JSON 구조 비교기Markdown 표 생성기Base64 인코더JSON 포맷터URL 인코더SQL 포맷터Cron 표현식 생성기정규식 테스터UUID 생성기해시 생성기타임스탬프 변환기JWT 디코더HTML 엔티티 변환기Markdown 미리보기메타태그·OG 생성기JSON CSV 변환대소문자·케이스 변환이미지 Base64 변환
댓글과 질문