CSS box-shadow 생성 무료 온라인 도구. 오프셋·블러·스프레드·색상 조절, 실시간 미리보기. 코드 복사 가능. 브라우저 처리.
Ctrl+D 를 눌러 이 페이지를 즐겨찾기에 추가하세요
CSS 그림자 생성기는 box-shadow 속성을 시각적으로 편집하는 무료 온라인 도구입니다. 오프셋, 블러, 스프레드, 색상을 슬라이더로 조정하고 실시간 미리보기로 확인합니다. 다중 그림자, inset 지원. 브라우저 처리, 서버 미전송, 무료.
네, 다중 그림자를 추가하여 복잡한 깊이감과 효과를 만들 수 있습니다. 각 그림자를 개별적으로 조정할 수 있습니다.
inset 그림자는 요소의 안쪽에 표시되는 그림자입니다. 일반 box-shadow는 바깥쪽에 표시되지만, inset을 추가하면 오목하게 들어간 효과를 만들 수 있습니다.
현실의 그림자는 검정이 아니라 배경색이 어두워진 것에 가깝고, 가장자리로 갈수록 흐려집니다. 검정 30% 하나를 크게 넣기보다, 아주 옅은 그림자 두세 겹을 서로 다른 흐림값으로 겹치면 훨씬 자연스럽습니다. 예컨대 가까운 곳에 1px 살짝, 그 뒤에 8px 넓게, 더 뒤에 24px 아주 옅게 두는 식입니다. 광원이 위에 있다고 가정하고 세로 오프셋만 주며 가로는 0으로 두세요.
정지 상태에서는 거의 영향이 없지만, 애니메이션과 만나면 이야기가 달라집니다. 마우스를 올릴 때 box-shadow 값을 바꾸도록 만들면 브라우저가 매 프레임 그림자를 다시 계산해 저사양 기기에서 눈에 띄게 버벅입니다. 그림자가 커지는 효과가 필요하다면, 미리 그려 둔 그림자 레이어의 opacity나 transform만 바꾸는 방식으로 구현하면 훨씬 부드럽습니다.