box-shadow 생성기
그림자 레이어를 여러 겹 쌓아 자연스러운 box-shadow를 만들고, 실시간 미리보기와 함께 CSS 코드를 복사할 수 있습니다.
결과
그림자 레이어
미리보기
사용법
box-shadow는 가로 오프셋, 세로 오프셋, 흐림(blur), 번짐(spread), 색상 순서로 값을 씁니다. 여기서는 여러 레이어를 쉼표로 이어 붙여 겹칠 수 있습니다. 하나의 진한 그림자보다흐림과 투명도가 다른 그림자를 2~4겹 쌓으면 훨씬 자연스러운 깊이감이 나옵니다.
inset을 켜면 요소 안쪽으로 그림자가 들어가 눌린 느낌이나 내부 경계선 효과를 줍니다. 색상은 보통 검정에 낮은 투명도(0.1~0.2)를 씁니다. 완전 불투명한 회색보다 반투명 검정이 배경색과 자연스럽게 섞입니다.