CSS box-shadow 그림자 생성기

CSS box-shadow 속성은 이미지 없이 요소의 바깥이나 안쪽에 그림자를 하나 이상 그립니다. 이 생성기는 오프셋, 흐림, 퍼짐, 색, 불투명도로 값을 만들고, 추가한 레이어가 올바른지 검사하며, 사용자의 브라우저에서 샘플 카드에 그대로 그려 보여 주므로 미리보기가 CSS 결과와 정확히 같습니다. 프리셋으로 Tailwind CSS 그림자 단계, 부드러운 5겹 그림자, 포커스 링, 뉴모피즘 한 쌍을 제공합니다.

사용 방법

1. 프리셋을 고르거나 "직접 설정"을 유지하고 오프셋, 흐림, 퍼짐, 색, 불투명도를 정합니다.
2. 안쪽 그림자를 원하면 inset을 켭니다.
3. 겹그림자나 링 효과를 위해 한 줄에 하나씩 추가 레이어를 입력합니다.
4. CSS 한 줄을 복사하고, 내 페이지에 맞게 미리보기 카드와 배경 색을 조정하세요.

계산식

box-shadow: [inset] <x> <y> <blur> <spread> <color> [, 더 많은 레이어]

x가 양수이면 그림자가 오른쪽으로, y가 양수이면 아래로 움직입니다. 흐림은 가장자리를 부드럽게 하며 음수일 수 없습니다. 퍼짐은 흐리게 하기 전에 그림자를 키우거나 줄입니다. 음수 퍼짐은 큰 흐림이 옆으로 삐져나오지 않게 합니다.

예시

기본값(가로 0 px, 아래로 8 px, 흐림 24 px, 퍼짐 −4 px, 검정 20%)은 box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2);가 되어 카드 아래에 부드러운 그림자를 만듭니다. 레이어 0 0 0 1px red를 더하면 크기를 바꾸지 않고 카드에 1 px 링으로 윤곽이 그려집니다.