CSS Box Shadow 생성기
실시간 미리보기로 CSS box-shadow를 만듭니다 — 여러 겹 쌓기, 오프셋·흐림·번짐·색상·불투명도·inset 조절 후 코드 복사. 브라우저 처리.
프리셋
상자 색·배경·모양은 미리보기 전용입니다 — 아래 CSS는 그림자입니다.
box-shadow: 4px 8px 24px -2px rgba(0, 0, 0, 0.25);🔒 브라우저에서 생성되며 업로드되지 않습니다.
CSS box-shadow를 시각적으로
가로·세로 오프셋, 흐림, 번짐, 불투명도를 슬라이더로 조절하고 색을 고른 뒤 inset를 켜세요. 미리보기 상자는 바로 아래
적힌 box-shadow 선언 그 자체로 칠해지므로, 보이는 그대로 붙여넣게 됩니다. 그림자를 여러 겹 쌓아 한 선언에
담을 수 있고, 프리셋에서 시작하거나, 작업하는 동안 상자 색·배경·모양을 원하는 대로 바꿔 볼 수도 있습니다.
각 값의 역할
오프셋 X/Y는 그림자를 이동하고, 흐림은 가장자리를 부드럽게 하며, 번짐은 크기를 키우거나 줄입니다. inset는 그림자를 요소 뒤가 아니라 안쪽에 그립니다. 쉼표로 나열한 여러 그림자는 목록 순서대로, 첫 번째가 가장 앞에 그려집니다 — 부드럽게 겹친 깊이감은 이렇게 만듭니다.
자주 묻는 질문
inset 그림자가 뭔가요?
요소 안쪽에 그림자를 그려, 뒤에 드리우는 대신 눌린 듯한 내부 효과를 만듭니다.
음수 오프셋도 되나요?
네. 음수 X는 그림자를 왼쪽으로, 음수 Y는 위로 옮겨 어느 방향으로든 그림자를 드리울 수 있습니다.
그림자를 여러 개 겹칠 수 있나요?
네. "그림자 추가"로 층을 늘리고 각 탭에서 따로 조절하면, 쉼표로 이어진 하나의 box-shadow로 적히고 목록 순서대로(첫 번째가 가장 앞) 그려집니다.
상자 색과 배경도 CSS에 들어가나요?
아니요. 그 둘은 자신의 디자인 위에서 그림자를 가늠해 보라고 미리보기만 꾸밉니다. 생성되는 선언은 그림자 자체이며, 원하면 -webkit-·-moz- 프리픽스 줄을 함께 낼 수 있습니다.
업로드되는 게 있나요?
아니요. 슬라이더 값으로 브라우저에서 그림자를 생성할 뿐 서버로 아무것도 전송되지 않습니다.