CSS 그림자 생성기
가로·세로 이동량과 흐림·확장값으로 box-shadow 코드를 생성합니다.
입력
예시값이 입력되어 있습니다. 바로 확인하거나 값을 바꿔 보세요.
입력은 브라우저에서 처리합니다. 새로고침하면 예시값으로 돌아갑니다.
결과
입력된 예시값으로 바로 결과를 확인하거나 값을 바꿔 보세요.
브라우저에서만 처리합니다. 입력은 최대 50,000자이며 결과는 실행되지 않는 텍스트로 표시합니다.
결과 공유
도구 링크와 결과 텍스트를 함께 공유합니다. 결과는 URL에 넣지 않습니다. 아래 내용을 확인하고 공유하세요.
계산·변환 기준
오프셋·흐림·퍼짐으로 box-shadow 코드 만들기.
box-shadow: x y blur spread color
입력 예시
0px 4px 12px 0px #000000
가로 0, 세로 4, 흐림 8, 퍼짐 0이면 아래 방향으로 이동한 흐린 그림자를 만듭니다. 네 수치의 단위는 px입니다.
사용 방법
- 입력된 예시값을 사용하거나 가로 이동 px, 세로 이동 px, 흐림 px, 확장 px, HEX 색상 항목을 바꾸세요.
- 결과 확인하기를 누르고 아래 결과를 확인하세요.
- 필요하면 결과 복사로 가져갈 수 있습니다.
자주 묻는 질문
퍼짐과 흐림의 차이는 무엇인가요?
퍼짐은 그림자 윤곽을 늘리거나 줄이고 흐림은 경계를 부드럽게 합니다. 음수 퍼짐은 가능하지만 흐림 반경은 0 이상이어야 합니다. 이 도구는 단일 외부 그림자를 생성합니다.
계산 기준과 참고 자료
- W3C — CSS Backgrounds and Borders
box-shadow의 오프셋·흐림·퍼짐