CSS 박스 그림자 생성기

box-shadow 구문

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: 양수는 오른쪽, 음수는 왼쪽을 의미합니다.
• y-offset: 양수는 아래쪽, 음수는 위쪽을 의미합니다.
• blur: 0이면 또렷한 가장자리, 값이 클수록 더 부드러워집니다. 눈에 보이는 크기는 요소 바깥쪽으로 흐림 값의 약 1.5배 정도까지 퍼집니다.
• spread: 요소를 넘어 추가로 확장되는 크기입니다. 양수는 그림자를 키우고, 음수는 줄입니다(은은한 후광을 만들 때 유용합니다).
• colour: 모든 CSS 색상을 지원합니다. rgba(0, 0, 0, 0.15)가 가장 기본이 되는 값입니다.
• inset: 요소 안쪽으로 그림자를 뒤집어 주는 키워드입니다.

여러 겹의 그림자는 사실적으로 보입니다

이 생성기는 한 번에 하나의 그림자 규칙만 출력합니다. 레이어 그림자를 만들려면 각 레이어를 따로 생성한 다음 규칙을 쉼표로 결합하세요.

0 0 40px 그림자 하나만 쓰면 흐릿해 보입니다. 두 개의 그림자, 즉 요소에 가까운 작고 또렷한 그림자와 더 멀리 떨어진 크고 부드러운 그림자를 겹치면 실제 빛이 산란하는 방식을 흉내 낼 수 있습니다.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

첫 번째 줄은 밀착된 접지 그림자를, 두 번째 줄은 더 부드러운 주변 그림자를 만듭니다. 이 한 가지 패턴만으로 카드형 UI의 80%를 처리할 수 있습니다.

엘리베이션(높이) 시스템

머티리얼 디자인은 6단계의 엘리베이션(높이)을 사용하며, 각 단계마다 서로 다른 그림자 조합을 둡니다. 단순화하면 다음과 같습니다.

엘리베이션 역할마다 하나씩 골라 일관되게 사용하세요.

컬러 그림자가 더 자연스럽게 보입니다

순수한 검은색 그림자는 인공적으로 보입니다. 실제 그림자는 그 아래 표면의 색조를 띠기 때문입니다. 다음과 같이 시도해 보세요.

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

순수한 검은색 대신 차가운 청회색을 사용했습니다. 따뜻한 배경에서는 더 따뜻한 색조를 쓰세요.

성능

박스 그림자는 다시 그릴 때마다 매번 페인팅됩니다. 많은 요소에 크고 무거운 그림자를 적용하면 스크롤이 느려질 수 있습니다. 완화 방법은 다음과 같습니다.

• 요소에 transform: translateZ(0)을 적용해 합성 레이어를 강제로 생성하세요.
• 그림자가 clip-path를 따라가야 하는 경우에만 복잡한 그림자를 filter: drop-shadow()로 대체하세요(일반적으로 더 느립니다).
• 자주 다시 렌더링되는 요소에서는 그림자를 제한하세요.

눌린 상태를 위한 inset

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

inset 그림자는 움푹 들어간 느낌을 흉내 내, 버튼이 표면에 눌려 들어간 것처럼 보이게 합니다. 아래쪽으로 살짝 내리는 transform: translateY(1px)와 함께 쓰면 손끝에 닿는 듯한 클릭감을 줄 수 있습니다.