CSS 박스 섀도우 만들기

박스 섀도우 생성기 사용 방법

1. 1

   시작할 그림자 고르기

   부드러움, 레이어드, 엘리베이션 2 같은 프리셋을 누르거나 기본 레이어를 조절하세요.

2. 2

   레이어별로 다듬기

   레이어를 선택해 X·Y 오프셋, 흐림, 확장, 색, 불투명도, 안쪽을 설정하세요.

3. 3

   내 표면에서 확인하기

   박스 크기, 모서리 반경, 색을 스타일을 적용할 요소에 맞게 바꾸세요.

4. 4

   CSS 복사하기

   box-shadow 선언문이나 Tailwind 클래스를 복사해 코드에 붙여 넣으세요.

박스 섀도우 생성기 소개

CSS box-shadow 속성은 레이어 목록을 받아요. 각 레이어에는 가로·세로 오프셋, 흐림 반경, 확장 거리, 색, 그리고 선택 사항인 inset 키워드가 들어가요. 자연스러운 깊이감을 내려면 두 개 이상의 레이어에서 이 값들의 균형을 맞춰야 하는데, 스타일시트에서 숫자를 직접 고치며 맞추기는 쉽지 않아요. 이 편집기는 슬라이더를 움직이는 동안 실시간 미리보기 박스로 결과를 보여 주고, 선언문과 Tailwind shadow-[…] 클래스를 대신 만들어 줘요.

레이어는 원하는 만큼 추가할 수 있어요. 비교하려고 잠시 숨기거나 위아래로 옮길 수 있고(목록의 첫 번째 레이어가 가장 위에 그려져요), 눌린 버튼이나 입력 필드에 쓰도록 안쪽으로 바꿀 수도 있어요. 오프셋은 −100~100픽셀, 흐림은 최대 200픽셀, 확장은 −100~100 범위이고, 모든 색에는 각각 불투명도가 있어요. 음수 확장은 요즘 부드러운 그림자의 비결이에요. 그림자를 요소 아래로 끌어당겨 아래쪽에 은은한 빛만 보이게 해 줘요.

미리보기 박스는 크기, 모서리 반경, 박스 색, 배경색을 자유롭게 바꿀 수 있어서 실제 디자인 표면에서 그림자를 판단할 수 있어요. 그림자에 더 높은 불투명도나 색이 있는 글로우가 필요한 다크 테마도 확인할 수 있어요.

시작점으로 쓸 프리셋은 12개예요. Material Design 엘리베이션 4단계, 부드러운 단일 레이어, 5개 레이어의 매끄러운 그림자, 거친 네오브루탈리즘 오프셋, 뉴모피즘, 이너 그림자, 색이 있는 글로우, 포커스 스타일 아웃라인 링, 플로팅 카드가 있어요. 그라디언트는 다른 탭에 있고, 텍스트 그림자와 drop-shadow() 필터는 다루지 않아요.

박스 섀도우 생성기: 자주 묻는 질문