이렇게 사용하세요
위의 프리셋에서 비슷한 분위기를 고른 다음 슬라이더로 다듬는 방법이 가장 빨라요. 레이어 목록에서 편집할 그림자를 고르면 아래 슬라이더가 그 레이어를 조절해요. 체크 박스로 레이어를 잠깐 꺼서 비교할 수도 있어요. 미리 보기의 배경색과 상자색을 실제 페이지 색으로 맞추면 결과를 더 정확하게 가늠할 수 있어요.
box-shadow 문법
한 겹은 [inset] X Y 흐림 퍼짐 색 순서로 적어요. X와 Y는 그림자를 오른쪽·아래로 미는 거리이고, 음수면 반대 방향이에요. 흐림(blur)이 클수록 가장자리가 부드럽게 번지고, 퍼짐(spread)은 그림자 자체를 키우거나(양수) 줄여요(음수). inset을 붙이면 상자 안쪽에 그려져 눌린 느낌이 나요.
쉼표로 여러 겹을 이으면 먼저 적은 그림자가 위에 그려져요. 실제 빛처럼 자연스러운 그림자는 대개 짧고 진한 그림자와 길고 옅은 그림자를 겹쳐 만들어요. 큰 그림자에 음수 spread를 주면 옆으로 퍼지지 않고 아래로만 떨어져 깔끔해 보여요.
자주 묻는 질문
그림자가 너무 탁하게 보여요.
검은색 투명도를 10~20% 정도로 낮추고, 배경이 색이 있다면 그림자 색도 배경과 비슷한 계열의 어두운 색으로 바꿔 보세요.
그림자를 많이 쌓으면 느려지나요?
일반적인 페이지에서는 체감하기 어려워요. 다만 스크롤 중 계속 움직이는 요소에 큰 blur 그림자를 여러 겹 주면 저사양 기기에서 버벅일 수 있어요.
text-shadow에도 쓸 수 있나요?
text-shadow는 spread와 inset이 없어요. X, Y, 흐림, 색만 가져가서 쓰면 돼요.