CSS box-shadow 생성기 - 다중 레이어 그림자, Material Design, Neumorphism 프리셋, 실시간 미리보기로 완벽한 CSS 그림자 코드를 생성하세요.
box-shadow는 5가지 값으로 구성됩니다: offset-x(가로 위치), offset-y(세로 위치), blur-radius(흐림 정도), spread-radius(그림자 크기 확장), color(색상). 예: box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2). inset 키워드를 추가하면 내부 그림자가 됩니다. 여러 그림자를 콤마로 구분하여 중첩할 수 있으며, 이를 활용해 뉴모피즘 등 입체적인 효과를 만듭니다.
box-shadow는 렌더링 성능에 영향을 줄 수 있습니다. blur-radius가 클수록 GPU 리소스를 더 소모하며, 여러 개의 그림자를 중첩하면 성능 저하가 발생할 수 있습니다. 특히 모바일 기기에서 주의가 필요합니다. 성능 최적화 팁: ① will-change: box-shadow 사용 ② 애니메이션 시 가짜 그림자(::after pseudo-element) 활용 ③ 큰 blur 값보다 적절한 값 사용.