CSS 박스 그림자 생성기

실시간 슬라이더로 오프셋, 흐림, 확산, 색상, 투명도를 맞추고 밝은 배경과 어두운 배경에서 결과를 미리 본 다음, 깔끔한 box-shadow CSS를 복사하세요. 모든 작업은 브라우저 안에서 이루어집니다.

미리보기

그림자

가로 오프셋

세로 오프셋

흐림

확산

색상

#0a0a0a

투명도

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

CSS 박스 그림자 생성기 사용 방법

1
오프셋 설정하기
가로·세로 오프셋 슬라이더로 그림자를 좌우와 위아래로 옮기세요. 세로 값이 양수이면 그림자가 요소 아래로 내려가고, 음수이면 위로 올라갑니다.
2
그림자 다듬기
흐림을 키우면 가장자리가 부드럽게 퍼지고, 낮게 두면 또렷한 그림자가 됩니다. 확산은 흐림이 적용되기 전에 그림자 크기를 키우거나 줄입니다.
3
색상과 투명도 고르기
색상 견본을 클릭해 그림자 색을 고른 뒤 투명도를 설정하세요. 밝은 배경에서는 투명도가 낮은 부드러운 어두운 그림자가 가장 자연스럽게 보입니다.

4
CSS 복사하기
안쪽 그림자가 필요하면 inset을 켜고, 밝은 배경이나 어두운 배경에서 미리 본 다음, box-shadow 한 줄을 스타일시트에 복사하세요.

CSS 박스 그림자는 어떻게 만드나요?

슬라이더로 가로·세로 오프셋과 흐림, 확산을 설정하고 색상과 투명도를 고르면, 아래에 box-shadow CSS가 실시간으로 생성됩니다. 그대로 복사해 원하는 요소에 붙여넣으면 됩니다.

box-shadow의 각 값은 무엇을 뜻하나요?

값은 차례대로 가로 오프셋, 세로 오프셋, 흐림 반경, 확산 반경이며 그 뒤에 색상이 옵니다. 오프셋은 그림자를 옮기고, 흐림은 가장자리를 부드럽게 하며, 확산은 흐려지기 전 그림자의 크기를 바꿉니다.

inset 그림자란 무엇인가요?

inset 그림자는 요소 뒤가 아니라 안쪽에 그려지는 그림자로, 표면이 눌리거나 움푹 들어간 것처럼 보이게 합니다. 바깥쪽과 안쪽(inset)을 전환하면 바깥 그림자와 안쪽 그림자를 오갈 수 있습니다.

부드럽고 자연스러운 그림자는 어떻게 만드나요?

세로 오프셋은 작게, 흐림은 넉넉하게, 확산은 살짝 음수로 두고, 어두운 색을 약 10~25퍼센트 정도의 낮은 투명도로 사용하세요. 진하고 불투명한 그림자는 인위적으로 보이기 쉽습니다.

내 데이터가 서버에 업로드되나요?

아니요. 이 생성기는 전적으로 브라우저에서 실행됩니다. 어떤 내용도 업로드되거나 기록·저장되지 않으므로 작업 내용이 비공개로 유지되며, 오프라인 상태에서도 도구가 계속 작동합니다.