box-shadow와 text-shadow로 깊이와 구분을 표현합니다.
box-shadow는 x, y 이동, blur, spread, color 순서이며 inset을 쓰면 안쪽 그림자가 됩니다. 그림자는 보조 표현이어야 하며 경계 구분을 그림자에만 의존하지 않습니다.
흰 .demo 위에 놓인 흰 카드는 테두리가 없어도 0 16px 35px 그림자 덕분에 떠 보입니다. 그림자가 16px 아래로 내려가고 35px만큼 흐려지며 알파가 0.18이라 카드 바닥 쪽에만 옅게 번집니다. 두 번째 상자는 box-shadow를 덮어써 바깥 그림자가 사라지고, 이동과 흐림 없이 spread 2px만 준 inset 그림자가 안쪽에 초록 선을 그어 크기를 바꾸지 않는 테두리 역할을 합니다.
강제 색상 모드에서는 box-shadow가 모두 지워지므로 두 번째 상자처럼 inset 그림자로 그린 선도 함께 사라집니다. 경계가 반드시 보여야 하는 곳에는 border나 outline을 써야 그 모드에서도 시스템 색으로 선이 남습니다.
큰 검은 그림자를 여러 겹 쓰면 화면이 탁하고 요소 위계가 불분명해집니다.
직접 바꿔보세요blur와 alpha 값을 각각 조절하세요.