CSS box-shadow 선언 생성기 — 무료
가로·세로 이동, 흐림, 확산과 색을 조합해 box-shadow 선언 하나를 만듭니다. 카드나 버튼의 그림자를 직접 입력해 CSS 파일에 옮기려는 작업에 적합합니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
숫자는 기기에만 남습니다. 서버로 전송되지 않습니다.
사용 방법과 입력
X와 Y 이동은 음수도 사용할 수 있고 흐림은 0 이상으로 지정하세요. inset을 선택하면 안쪽 그림자가 됩니다. 색상 입력값도 대상 브라우저가 이해하는 CSS 색이어야 합니다.
결과 해설과 예제
X 0, Y 8, blur 24, spread 0이면 아래쪽으로 부드럽게 퍼지는 그림자 후보가 됩니다. 출력 선언을 실제 컴포넌트에 적용해 배경색과 테두리에 어울리는지 확인하세요.
한계와 주의사항
- 현재 출력은 그림자 한 겹이며 다중 그림자는 쉼표로 직접 결합해야 합니다.
- 여러 box-shadow 선언을 연속으로 쓰면 보통 마지막 선언이 앞선 선언을 덮습니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| X 오프셋(px) | 허용 범위: -200–200 · 입력 간격: 1 |
| Y 오프셋(px) | 허용 범위: -200–200 · 입력 간격: 1 |
| 흐림(px) | 허용 범위: 0–200 · 입력 간격: 1 |
| 확산(px) | 허용 범위: -100–100 · 입력 간격: 1 |
| 색상 | 화면의 단위와 입력 형식을 확인하세요. |
| 안쪽 여백 | 화면의 단위와 입력 형식을 확인하세요. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
카드 아래쪽 그림자는 어떤 값을 조정하나요?
X 0, Y 8, blur 24, spread 0이면 아래쪽으로 부드럽게 퍼지는 그림자 후보가 됩니다. 출력 선언을 실제 컴포넌트에 적용해 배경색과 테두리에 어울리는지 확인하세요.
그림자를 여러 겹으로 만들려면 어떻게 하나요?
현재 출력은 그림자 한 겹이며 다중 그림자는 쉼표로 직접 결합해야 합니다. 여러 box-shadow 선언을 연속으로 쓰면 보통 마지막 선언이 앞선 선언을 덮습니다.
관련 도구
처음부터 다시 할 필요는 없습니다. 다음 단계에 맞는 도구로 자연스럽게 이어가세요.
CSS 그라데이션 — 코드 복사, 무료 | 사용법·입력·결과 해설
두 색 사이의 선형 또는 원형 그라데이션을 CSS background 선언으로 만듭니다. 색상 정지점을 복잡하게 편집하기 전에 두 색 조합과 방향을 시험할 수 있습니다.
px를 rem으로 변환 — 루트 크기 기준 | 사용법·입력·결과 해설
픽셀 길이를 사용자가 지정한 루트 글꼴 크기로 나누어 rem 값으로 표현합니다. 웹페이지의 실제 스타일을 읽지 않으므로 디자인 토큰을 옮길 때 기준값을 직접 맞추어야 합니다.
색상 명암비 검사기 — WCAG 2
전경색과 배경색의 sRGB 상대 휘도로 명암비를 구하고 본문·큰 글씨 기준을 비교합니다. 색 조합을 설계하는 단계에서 숫자 기준을 빠르게 확인하는 용도입니다.
