CSS Box-Shadow Generator

CSS box-shadow란 무엇인가요?

CSS 속성 box-shadow는 요소에 하나 이상의 그림자를 추가합니다. 그림자는 깊이감을 만들고 카드, 버튼, 대화 상자 등의 요소를 배경에서 돋보이게 합니다.

box-shadow 구문

구문은: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;입니다. Offset-X와 Offset-Y는 그림자 위치를 결정합니다. 블러 반경은 부드러움을, 확산 반경은 그림자 크기를 제어합니다.

멋진 그림자를 위한 팁

• 다양한 블러 값의 여러 그림자를 사용하면 더 사실적인 결과를 얻을 수 있습니다.
• 그림자 색상을 은은하게 유지하세요 — 강한 색상 대신 투명한 검정을 사용하세요.
• Inset 그림자는 눌린 버튼과 입력 필드에 적합합니다.
• 라이트 모드와 다크 모드 모두에서 그림자를 테스트하세요.