CSS box-shadow 속성의 값 순서는 어떻게 되나요?

box-shadow: offset-x offset-y blur-radius spread-radius color; 순서입니다. inset을 앞에 추가하면 내부 그림자가 됩니다. 예: box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.3);

블러(blur)와 스프레드(spread)의 차이는 무엇인가요?

블러는 그림자의 가장자리를 부드럽게 흐리는 정도입니다. 스프레드는 그림자 자체의 크기를 늘리거나 줄입니다. 양수값은 그림자를 확장하고, 음수값은 축소합니다.

여러 개의 박스 쉐도우를 동시에 적용할 수 있나요?

네, 쉼표로 구분해 여러 개를 적용할 수 있습니다. 예: box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.5);

💻 CSS 박스 쉐도우 생성기 | 실시간 미리보기 코드 복사

X 오프셋: 4px

Y 오프셋: 4px

블러: 8px

스프레드: 0px

그림자 색상

불투명도: 30%

Inset (내부 그림자)

생성된 CSS 코드

box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);

CSS box-shadow란?

CSS의 box-shadow 속성은 HTML 요소에 하나 이상의 그림자 효과를 추가하는 데 사용됩니다. 그림자의 위치(X·Y 오프셋), 흐림 정도(블러), 크기(스프레드), 색상과 투명도를 자유롭게 설정할 수 있습니다. 카드 컴포넌트, 버튼, 모달 창, 입력 필드 등 다양한 UI 요소에 입체감과 깊이감을 부여하는 데 광범위하게 활용됩니다.

box-shadow 속성값 설명

box-shadow는 다음 순서로 값을 받습니다: [inset] offset-x offset-y [blur-radius] [spread-radius] color. offset-x와 offset-y는 필수값으로, 그림자가 원본 요소에서 얼마나 이동하는지를 결정합니다. blur-radius는 그림자 가장자리의 흐림 정도이고, spread-radius는 그림자 크기 자체를 확장하거나 축소합니다. inset 키워드를 앞에 추가하면 요소 외부가 아닌 내부에 그림자가 적용됩니다.

좋은 그림자 디자인 팁

자연스러운 그림자는 실제 광원이 위에 있을 때를 가정해 Y 오프셋을 양수로, 블러를 적당히 크게 설정하는 것이 일반적입니다. 너무 강한 그림자보다 반투명한(rgba) 색상을 활용해 부드럽게 표현하면 세련된 느낌을 줍니다. 뉴모피즘(Neumorphism) 스타일은 밝은 그림자와 어두운 그림자를 동시에 적용해 입체적인 효과를 만들어냅니다.

자주 묻는 질문 (FAQ)

Q. box-shadow와 filter: drop-shadow의 차이는 무엇인가요?

A. box-shadow는 요소의 박스 모델 형태에만 그림자를 적용합니다. filter: drop-shadow()는 PNG의 투명 영역을 인식해 실제 이미지 형태에 맞는 그림자를 생성합니다. 불규칙한 모양의 아이콘이나 이미지에는 drop-shadow가 더 자연스럽습니다.

Q. 여러 개의 그림자를 적용할 수 있나요?

A. 네, 쉼표로 구분해 여러 개의 box-shadow를 동시에 적용할 수 있습니다. 처음에 작성한 그림자가 위에 렌더링됩니다. 예: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);

Q. 성능에 영향이 있나요?

A. box-shadow는 GPU 가속을 받지 못해 복잡한 그림자를 많이 사용하면 렌더링 성능에 영향을 줄 수 있습니다. 애니메이션에서 사용할 때는 filter: drop-shadow나 after 가상 요소를 활용하는 것이 성능상 유리합니다.

CSS box-shadow란?

box-shadow 속성값 설명

좋은 그림자 디자인 팁

자주 묻는 질문 (FAQ)

같은 카테고리 도구