CSS Box Shadow 생성기
오프셋·흐림·번짐·색상·불투명도·inset를 실시간 미리보기로 조절해 CSS box-shadow를 만들고 복사합니다. 브라우저 처리.
box-shadow: 4px 8px 24px -2px rgba(0, 0, 0, 0.25);🔒 브라우저에서 생성되며 업로드되지 않습니다.
CSS box-shadow를 시각적으로
가로·세로 오프셋, 흐림, 번짐, 불투명도를 슬라이더로 조절하고 색을 고른 뒤 inset를 켜면, 미리보기가 실시간으로
갱신되고 복사용 box-shadow 선언이 생성됩니다.
각 값의 역할
오프셋 X/Y는 그림자를 이동하고, 흐림은 가장자리를 부드럽게 하며, 번짐은 크기를 키우거나 줄입니다. inset는 그림자를 요소 뒤가 아니라 안쪽에 그립니다.
자주 묻는 질문
inset 그림자가 뭔가요?
요소 안쪽에 그림자를 그려, 뒤에 드리우는 대신 눌린 듯한 내부 효과를 만듭니다.
음수 오프셋도 되나요?
네. 음수 X는 그림자를 왼쪽으로, 음수 Y는 위로 옮겨 어느 방향으로든 그림자를 드리울 수 있습니다.
업로드되는 게 있나요?
아니요. 슬라이더 값으로 브라우저에서 그림자를 생성할 뿐 서버로 아무것도 전송되지 않습니다.