CSS 그림자 만들기

box-shadow를 보면서 만들어요

CSS의 box-shadow는 상자 모양 그대로 그림자를 그려 버튼·카드·팝업을 떠 보이게 해요. 숫자를 바꿔 가며 새로 고침할 필요 없이, 슬라이더를 움직이면 위 미리보기가 바로 바뀌고 아래에 그대로 붙여 쓰는 CSS 코드가 만들어져요. 그림자 값은 가로 세로 흐림 퍼짐 색 순서이고, 앞에 inset을 붙이면 안쪽 그림자가 돼요.

각 값의 뜻

• 가로·세로 위치 — 그림자를 오른쪽(+)·아래(+)로 얼마나 옮길지예요. 빛이 위에서 비치는 느낌을 내려면 세로를 + 로 두세요.
• 흐림(blur) — 클수록 가장자리가 부드럽게 퍼져요. 0이면 선명한 단색 그림자예요.
• 퍼짐(spread) — 그림자 크기를 키우거나(+) 줄여요(−). 흐림을 크게 하고 퍼짐을 −로 주면 그림자가 상자 아래로만 은은하게 보여요.
• 색·불투명도 — 그림자는 검은색을 낮은 불투명도(5~20%)로 쓰면 자연스러워요. 결과 코드에는 rgba로 들어가요.

여러 겹 쌓기

실제 그림자는 가까운 곳은 진하고 좁게, 먼 곳은 연하고 넓게 퍼져요. 그래서 작은 그림자와 큰 그림자를 쉼표로 이어 여러 겹 쌓으면 한 겹보다 훨씬 자연스러워져요. ‘부드러운 카드’ 프리셋이 세 겹 예시예요. 겹은 8개까지 쌓을 수 있고, 먼저 적은 그림자가 위에 그려져요.

Tailwind로 쓸 때

Tailwind CSS를 쓰는 프로젝트라면 아래 칸의 shadow-[…] 임의값 클래스를 그대로 붙이면 돼요. 띄어쓰기는 Tailwind 규칙대로 밑줄(_)로 바꿔 두었어요.

참고한 자료

• W3C CSS Backgrounds and Borders Module Level 3 — box-shadow