CSS 박스 그림자 생성기 — 레이어 그림자, 뉴모피즘, 텍스트 그림자

box-shadow: inset? x-오프셋 y-오프셋 흐림 확산 색상. x 오프셋은 그림자를 오른쪽으로(음수면 왼쪽으로), y 오프셋은 아래로(음수면 위로) 옮깁니다. 흐림은 가장자리가 얼마나 부드러운지이며 0이면 날카로운 가장자리가 됩니다. 확산은 흐리기 전에 그림자를 키웁니다(음수면 줄어들며, 큰 흐림이 옆으로 비치지 않게 하는 방법입니다). inset은 그림자를 요소 바깥이 아니라 안쪽에 그립니다. 여러 그림자는 쉼표로 구분하며, 첫 번째가 맨 위에 그려집니다.

진한 그림자 하나보다 불투명도가 낮은 그림자 두 개 이상을 겹치세요. 접촉면에는 작고 촘촘한 그림자(약 10% 검정의 0 1px 2px), 주변광에는 더 크고 부드러운 그림자(8~12%의 0 8px 24px)를 씁니다. 큰 그림자에는 약간 음수인 확산을 줘서 요소 아래에 머물게 하세요. 순수한 검정 대신 배경색을 어둡게 한 색으로 그림자에 색조를 주면 색이 있는 페이지에서도 더 자연스러워 보입니다.

요소에 부모와 같은 배경색을 주고 그림자 두 개를 추가하세요. 오른쪽 아래로 이동한 어두운 그림자와 왼쪽 위로 이동한 밝은(보통 흰색) 그림자입니다. 예를 들어 #e0e5ec 위에 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5)를 씁니다. 눌린 상태는 inset으로 만드세요. 컨트롤에 쓸 때는 주의하세요. 뉴모피즘 버튼은 배경과의 대비가 매우 낮아서, 테두리나 더 강한 외곽선을 추가하지 않으면 UI 구성 요소에 대한 WCAG 3:1 요건을 대개 충족하지 못합니다.

box-shadow는 border-radius를 포함한 요소의 사각형 박스를 따르고 확산과 inset을 지원합니다. filter: drop-shadow()는 보이는 픽셀을 따르므로 투명 PNG, SVG 아이콘, 잘린 도형의 윤곽을 따라가지만, 확산과 inset이 없고 함수 하나에 그림자 하나만 받습니다. 카드와 버튼에는 box-shadow를, 불규칙한 이미지와 아이콘에는 drop-shadow를 쓰세요.

아니요. text-shadow는 x 오프셋, y 오프셋, 흐림, 색상만 받습니다. 외곽선을 흉내 내려면 각 방향으로 1px씩 이동한 날카로운 그림자를 네 개 이상 겹치거나(외곽선 프리셋), 이제 널리 지원되는 -webkit-text-stroke를 쓰세요. 부드럽고 불투명도가 낮은 텍스트 그림자는 사진 위 흰 글자의 가독성을 높일 수 있지만, WCAG 대비 계산에는 포함되지 않습니다.

정적인 그림자는 부담이 적습니다. 흐림 반경이 큰 그림자는 매 프레임 다시 그려질 때 비싸집니다. 예를 들어 많은 카드에서 호버 시 box-shadow를 애니메이션하는 경우입니다. 표준적인 요령은 그림자를 가상 요소에 넣고 대신 그 불투명도를 애니메이션하는 것입니다. 그러면 브라우저가 흐림을 다시 그리지 않고 GPU에서 합성할 수 있습니다.