CSS Box Shadow 그림자 생성기

CSS Box Shadow 그림자 생성기 사용법

웹 요소에 입체감과 깊이감을 더하고 싶을 때 X/Y 오프셋, 블러, 스프레드, 색상 투명도를 조절해 보세요. 생성된 box-shadow 선언을 CSS 파일이나 스타일 속성에 그대로 붙여 넣을 수 있습니다.

계산 방법

CSS 그림자는 가로 오프셋, 세로 오프셋, 블러, 스프레드, 색상 순서로 구성됩니다. 색상 투명도는 퍼센트를 알파 값으로 변환해 rgba() 색상에 적용합니다.

최종 CSS는 다음 순서로 만들어집니다.

box-shadow: X 오프셋 Y 오프셋 블러 스프레드 rgba 색상;

계산 예시

• 상황 1: X 오프셋 0px, Y 오프셋 4px, 블러 12px, 스프레드 0px, 검은색 투명도 15%를 입력하면 box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);가 생성됩니다.
• 상황 2: X 오프셋 4px, Y 오프셋 8px, 블러 20px, 스프레드 2px, #336699 색상과 투명도 20%를 입력하면 box-shadow: 4px 8px 20px 2px rgba(51, 102, 153, 0.2);가 생성됩니다.

사용 시 주의사항 및 활용 팁

• 블러와 스프레드는 0px으로 설정하면 가장자리가 선명한 그림자가 됩니다.
• X 오프셋과 Y 오프셋에 음수 값을 입력하면 그림자가 왼쪽이나 위쪽으로 이동합니다.
• 투명도가 높을수록 그림자가 진해지므로 배경색과 대비를 함께 확인하세요.
• 본 계산기 결과는 CSS 작성에 활용할 수 있는 참고용 코드입니다. 실제 적용 시 다양한 화면 크기와 배경색에서 가독성을 확인해 주세요.