사용 방법
입력과 선택
가로·세로 이동과 blur·spread 값을 px로 입력합니다. 그림자 색·불투명도와 안쪽 그림자 여부를 고릅니다.
결과와 처리 기준
CSS box-shadow의 offset-x·offset-y·blur-radius·spread-radius와 RGBA 색을 조합합니다. 미리보기 요소에 같은 선언을 적용합니다.
저장과 확인할 범위
한 개의 그림자를 생성하며 여러 그림자 합성과 filter:drop-shadow는 제공하지 않습니다. 흐림은 음수를 받지 않고 이동·확산은 음수도 입력할 수 있습니다.
주요 기능
- 이동·흐림·확산·안쪽 그림자
- 가로·세로 이동, 흐림과 확산, 색상·불투명도를 정해 CSS box-shadow를 만듭니다. 안쪽 그림자와 배경 색을 미리 확인하고 생성된 스타일 선언을 복사해 버튼이나 패널 디자인에 쓸 수 있습니다.
- box-shadow 코드와 미리보기는 같은 값인가요?
- CSS box-shadow의 offset-x·offset-y·blur-radius·spread-radius와 RGBA 색을 조합합니다. 미리보기 요소에 같은 선언을 적용합니다.
- 여러 그림자나 이미지의 drop-shadow도 만들 수 있나요?
- 한 개의 그림자를 생성하며 여러 그림자 합성과 filter:drop-shadow는 제공하지 않습니다. 흐림은 음수를 받지 않고 이동·확산은 음수도 입력할 수 있습니다.
CSS 그림자 생성기 사용 기준
가로·세로 이동과 blur·spread 값을 px로 입력합니다. 그림자 색·불투명도와 안쪽 그림자 여부를 고릅니다.
CSS box-shadow의 offset-x·offset-y·blur-radius·spread-radius와 RGBA 색을 조합합니다. 미리보기 요소에 같은 선언을 적용합니다.
한 개의 그림자를 생성하며 여러 그림자 합성과 filter:drop-shadow는 제공하지 않습니다. 흐림은 음수를 받지 않고 이동·확산은 음수도 입력할 수 있습니다.
자주 묻는 질문
그림자의 위치와 크기는 어떻게 정하나요?
가로·세로 이동과 blur·spread 값을 px로 입력합니다. 그림자 색·불투명도와 안쪽 그림자 여부를 고릅니다.
box-shadow 코드와 미리보기는 같은 값인가요?
CSS box-shadow의 offset-x·offset-y·blur-radius·spread-radius와 RGBA 색을 조합합니다. 미리보기 요소에 같은 선언을 적용합니다.
여러 그림자나 이미지의 drop-shadow도 만들 수 있나요?
한 개의 그림자를 생성하며 여러 그림자 합성과 filter:drop-shadow는 제공하지 않습니다. 흐림은 음수를 받지 않고 이동·확산은 음수도 입력할 수 있습니다.
파일과 입력 내용이 서버나 주소에 남나요?
파일과 입력 내용은 브라우저 안에서 처리하며 서버·주소·브라우저 저장소에 기록하지 않습니다. 복사와 파일 저장은 직접 버튼을 누를 때만 수행합니다. 새로고침하면 작업 내용이 지워집니다.