CSS 박스 섀도우 생성기

섀도우는 UI에 깊이와 계층감을 더해줍니다. 좋은 섀도우는 눈에 띄지 않으면서 인터페이스를 더 자연스럽게 만들어 줍니다.

CSS box-shadow 구문

box-shadow: 수평오프셋 수직오프셋 흐림반경 퍼짐반경 색상 inset;
/* 예시 */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);

매개변수 설명

• 수평 오프셋: 양수는 오른쪽, 음수는 왼쪽
• 수직 오프셋: 양수는 아래쪽, 음수는 위쪽
• 흐림 반경: 클수록 더 부드럽고 넓게 퍼짐
• 퍼짐 반경: 섀도우 크기 조절 (+확대, -축소)
• inset: 내부 섀도우

디자인 트렌드별 섀도우

• 뉴모피즘: 밝은/어두운 이중 섀도우
• 머테리얼 디자인: 고도에 따른 단계별 섀도우
• 글래스모피즘: 은은한 반투명 섀도우