01
그림자의 층과 순서를 고르기
기본 그림자에 더 작은 접촉 그림자를 추가하세요. 확산을 음수로 하면 가장자리가 안쪽으로 줄어듭니다. 안쪽 그림자는 선택한 층에만 적용됩니다.
HTML과 CSS 도구
CSS 효과 생성기그림자부터 필터까지
그림자, 테두리와 모서리, 변형, 필터 중 하나를 선택하세요. 출력은 현재 효과에만 해당합니다.
CSS 효과 생성기
실시간 미리보기
색이 있는 타일은 예시 배경이며 출력 CSS에는 포함되지 않습니다.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
설정은 이 브라우저 탭에만 남으며 이미지나 CSS를 업로드하지 않습니다.
효과 설정
박스 그림자 CSS가 최신 상태입니다.
카드 그림자가 지나치게 진하다면 불투명도만 낮추는 것보다 확산과 흐림을 따로 조절하는 편이 낫습니다. CSS 효과 생성기에서 두 그림자 층을 겹쳐 보고 실제 box-shadow 선언을 확인해 보세요.
CSS 효과 생성기는 모서리와 필터 설정도 탭 안에 유지합니다. 다른 효과로 이동했다가 돌아와도 입력한 값은 남지만, 복사되는 CSS에는 현재 선택한 선언만 들어갑니다.
CSS 효과 생성기를 쓰는 이유
접촉 그림자와 넓은 그림자를 따로
단일 CSS 그림자 생성기는 두 빛의 층을 표현하기 어렵습니다. 이 도구는 네 층까지 각기 다른 색, 확산, 불투명도와 안쪽 그림자를 지정하고 쉼표로 연결합니다.
모드를 바꿔도 CSS를 섞지 않음
CSS 효과 생성기에서 테두리, 변형, 필터 설정은 서로 독립적입니다. CSS 필터 생성기처럼 색조를 조정해도 앞서 만든 그림자는 출력에 섞이지 않습니다.
값이 화면에 미치는 영향을 확인하기
02
모서리 연결과 변형 순서 살피기
모서리를 연결하면 한 값으로 네 곳을 조절할 수 있습니다. 변형 출력은 이동, 회전, 크기, 기울임 순이며 CSS에서 순서를 바꾸면 다른 결과가 됩니다.
03
최신 결과만 내보내기
자동 생성은 마지막 수정 약 350ms 뒤에 끝납니다. 끈 경우 생성 버튼이나 Ctrl/Cmd+Enter를 사용하세요. 예제·초기화·층 삭제는 미리 본 다음 적용하고 한 번 되돌릴 수 있습니다.
네 종류 효과를 정확히 다루기
겹쳐 쓰는 박스 그림자
박스 섀도우 생성기로 최대 네 겹의 X/Y 위치, 흐림, 확산, 색상, 알파와 inset을 지정합니다. 결과는 box-shadow 선언 하나입니다.
테두리와 네 모서리
CSS 모서리 반경은 함께 묶거나 각각 px 값으로 설정할 수 있습니다. 테두리 두께가 0이면 border: none을 출력하되 둥근 모서리는 유지합니다.
고정된 변형 순서
이동, 회전, 가로·세로 배율과 기울임을 조합합니다. 기본값인 항목은 제외하고 모두 중립이면 transform: none을 생성합니다.
필요한 필터 함수만
CSS 필터 생성기에는 흐림, 밝기, 대비, 채도, 회색조, 세피아, 색조 회전, 반전, 불투명도가 있습니다. 중립값은 코드에서 빠집니다.
출력과 입력의 분명한 경계
- 현재 효과만 내보냄
- 모드별 값은 현재 탭에만 남으며 복사와 다운로드는 선택 중인 효과의 선언만 담습니다. 선택자, HTML, 접두사, 저장 계정은 만들지 않습니다.
- 허용 범위를 벗어나면 중단
- 그림자는 최대 네 겹, 색은 6자리 16진수입니다. 음수 흐림이나 범위를 벗어난 숫자는 필드를 알려 주고 내보내기를 막습니다. 음수 확산은 가능합니다.
- 배경 필터와 다른 그림자
- filter: drop-shadow()는 이미지 외곽선을 따를 수 있으나 box-shadow는 상자 형태를 따릅니다. 이 도구는 drop-shadow와 backdrop-filter를 만들지 않습니다.
- CSS 가져오기는 제공하지 않음
- 이미 작성한 CSS 해석, 애니메이션, 3D 뒤집기 카드, 이미지 출력은 범위 밖입니다. 미리보기 타일 배경도 결과 CSS에 포함되지 않습니다.
CSS 효과 생성기 자주 묻는 질문
그림자를 더 자연스럽게 만들려면 어떻게 하나요?
흐림만 키우기보다 확산과 불투명도를 함께 조절하세요. 넓고 약한 층에 짧은 접촉 그림자를 더하면 깊이를 비교하기 쉽습니다.
box-shadow의 확산 값은 어떤 역할을 하나요?
확산은 그림자의 전체 크기를 키우거나 줄입니다. 흐림은 가장자리의 부드러움을 조절하며, 이 도구는 음수 확산도 허용합니다.
복잡한 그림자가 성능에 영향을 주나요?
여러 층의 그림자와 큰 흐림은 다시 그릴 비용을 늘릴 수 있습니다. 이 도구는 네 층으로 제한하지만 실제 페이지 성능은 브라우저에서 확인해야 합니다.
그림자 데이터나 이미지가 서버로 전송되나요?
아니요. 입력과 생성은 현재 브라우저 탭에서 처리되며 이미지 업로드 입력도 없습니다.
생성된 CSS는 프로젝트에 어떻게 적용하나요?
현재 효과의 선언을 복사해 원하는 선택자 안에 붙여 넣으세요. 다른 모드의 선언이 필요하면 그 모드에서 따로 복사합니다.
그림자의 결과가 예상과 다른가요?