이렇게 사용하세요
그림자 흐림 32px, Y축 12px로 부드러운 패널 그림자를 만듭니다.
입력부터 결과까지
- CSS 생성기 작업 화면을 열고 예시를 불러옵니다.
- 설명을 읽고 형식과 옵션을 선택한 뒤, 자신의 입력으로 바꿉니다. 민감한 정보 대신 테스트 데이터로 먼저 확인하세요.
- 실행 후 결과와 상태 메시지를 확인합니다. 오류가 있으면 입력 형식을 수정하고 다시 실행하세요.
- 원하는 결과를 복사하거나 파일로 저장합니다. 생성·변환 결과는 자동으로 보관되지 않습니다.
그림자의 네 가지 길이
box-shadow의 길이는 X 이동, Y 이동, 흐림 반경, 확산 반경 순서입니다. 확산 값을 음수로 하면 그림자의 시작 영역을 줄이고, 흐림 값으로 가장자리를 부드럽게 만듭니다. 그림자는 레이아웃 크기에 포함되지 않으므로 부모 요소의 overflow: hidden에 잘릴 수 있습니다. 생성 코드는 선택자 이름만 바꾸어 적용할 수 있습니다. 키보드 포커스를 그림자로 표현하는 경우에는 배경과의 충분한 대비와 명확한 외곽선을 유지하세요.
예시 입력
X: 0 · Y: 12 · Blur: 32 · Spread: 0 Color: #000000 · Opacity: 25%
결과 해석
.panel {
box-shadow: 0px 12px 32px 0px rgb(0 0 0 / 0.25);
}알아두면 좋은 점
형식과 의미
그라데이션 각도 0deg는 아래에서 위 방향입니다. 90deg는 왼쪽에서 오른쪽입니다.
올바른 사용
CSS를 실제 배경과 함께 확인하세요. 그림자와 색은 주변 대비에 따라 다르게 보입니다.
지원 범위와 제한
표준 CSS box-shadow, linear-gradient, 반복 배경
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.
데이터는 어떻게 처리되나요?
도구 처리는 브라우저에서 수행합니다. DNS 조회는 명시한 외부 제공자에게 조회 도메인을 보냅니다. 홈·가이드·작업 화면에는 설정에 따라 광고가 표시될 수 있습니다.
도구 열기