CSS 그림자 생성기 — box-shadow 미리보기와 코드
카드와 버튼에 쓸 box-shadow를 조절하고 CSS 복사
브라우저에서 처리 · 서버로 전송되지 않음
양수 가로·세로 값은 오른쪽·아래쪽으로 이동합니다. 음수 확장은 그림자를 줄입니다.
그림자 CSS를 생성했습니다.
사용 방법
- 가로와 세로 이동 거리로 그림자의 방향을 정합니다.
- 흐림과 확장 값을 바꾸어 가장자리와 크기를 조절합니다.
- 그림자 색상과 불투명도를 고릅니다. 필요한 경우 안쪽 그림자를 켭니다.
- 미리보기에서 변화를 확인하고 생성된
box-shadow선언을 복사합니다.
각 값의 의미
가로 이동이 양수면 오른쪽, 음수면 왼쪽으로 이동합니다. 세로 이동이 양수면 아래쪽, 음수면 위쪽입니다. 흐림은 0 이상이며 값이 커질수록 가장자리가 부드러워집니다. 확장은 양수일 때 커지고 음수일 때 줄어듭니다.
색상은 RGB와 알파 값으로 출력합니다. 예를 들어 불투명도 25%는 rgba(0, 0, 0, 0.25)처럼 표현합니다. 안쪽 그림자를 켜면 선언 맨 앞에 inset이 붙습니다.
예시
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);는 아래쪽으로 8px 이동한 부드러운 검정 그림자입니다. 가로 이동을 0으로 두어 좌우 균형을 맞추고 흐림을 늘리면 카드가 배경에서 살짝 떠 보이는 효과를 만들 수 있습니다.
번짐을 줄이고 싶다면 흐림만 낮추기보다 확장에 음수 값을 넣어 비교해 보세요. 안쪽 그림자에서는 바깥쪽 카드 효과와 다른 모양이 나오므로 실제 적용할 크기에서 다시 확인하는 것이 좋습니다.
범위와 제한
가로·세로 이동과 확장은 -100100px, 흐림은 0200px, 불투명도는 0~100%입니다. 한 개의 그림자만 생성하며 여러 겹 효과는 복사한 CSS를 쉼표로 연결해 직접 편집해야 합니다. 미리보기는 고정 크기의 상자이므로 실제 요소의 크기, 모서리 반경, 배경색과 overflow 설정에 따라 결과가 달라질 수 있습니다.
자주 묻는 질문
흐림과 확장은 어떤 차이인가요?
흐림은 그림자 가장자리를 부드럽게 만들고, 확장은 그림자 모양 자체를 키우거나 줄입니다. 음수 확장 값을 사용하면 그림자 크기가 줄어듭니다.
안쪽 그림자는 무엇인가요?
inset을 사용하면 그림자가 상자 바깥이 아니라 안쪽에 그려집니다. 입력창이나 눌린 버튼 같은 오목한 표현에 사용할 수 있습니다.
왜 실제 페이지에서는 그림자가 잘리나요?
조상 요소의 overflow 설정이나 배치 공간 때문에 그림자가 잘릴 수 있습니다. 이 도구의 미리보기도 영역 밖으로 나간 큰 그림자를 잘라 표시합니다.
