CSS box-shadow를 시각적으로 만들고 코드를 복사합니다
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
x·y 오프셋, 흐림(blur), 확산(spread), 색상·투명도를 슬라이더로 조절해 box-shadow CSS를 만듭니다. 여러 겹 그림자도 지원합니다.
카드·모달·드롭다운에 떠 있는 느낌을 줄 때, 디자인 툴의 그림자 값을 CSS로 재현할 때 사용합니다.
블러가 큰 그림자는 투명도를 10% 안팎으로 낮춰야 자연스럽습니다. 예: 0 12px 40px rgba(20,22,30,.08) 은 카드에 두루 쓰이는 값입니다.
inset 옵션을 켜면 요소 안쪽으로 그림자가 들어갑니다. 입력창의 눌린 느낌에 씁니다.
블러 반경이 큰 그림자를 애니메이션하면 리페인트가 잦아집니다. 움직이는 요소는 opacity 전환을 권합니다.