CSS 박스 섀도우 & 테두리 반경 생성기

CSS 박스 섀도우 & 테두리 반경 생성기

🎨 라이브 미리보기가 포함된 무료 CSS box-shadow 및 border-radius 생성기입니다. 아름다운 그림자, 둥근 모서리, 현대적인 UI 효과를 만들 수 있으며, 웹 디자인용 코드를 복사해 바로 사용할 수 있습니다.

Box Shadow 속성

CSS box-shadow 속성은 요소의 프레임 주변에 그림자 효과를 추가합니다. 쉼표로 구분하여 여러 효과를 설정할 수 있습니다. 박스 섀도우는 요소를 기준으로 한 X/Y 오프셋, 블러 및 확산 반경, 그리고 색상으로 구성됩니다.

문법: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

그림자 파라미터

• X-오프셋(가로): 양수는 오른쪽, 음수는 왼쪽으로 이동
• Y-오프셋(세로): 양수는 아래, 음수는 위로 이동
• 블러 반경: 값이 클수록 더 흐려짐. 0은 선명한 그림자
• 확산 반경: 양수는 그림자 확대, 음수는 축소
• 색상: 모든 CSS 색상 값(hex, rgb, rgba, hsl)
• Inset: 바깥 그림자 대신 내부 그림자로 변경

Border Radius 속성

border-radius 속성은 요소의 바깥 테두리 모서리를 둥글게 만듭니다. 하나의 반경으로 원형 모서리를 만들 수도 있고, 두 개의 반경으로 타원형 모서리를 만들 수도 있습니다.

문법: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

자주 사용하는 사례

• 카드: 은은한 그림자(0 4px 6px rgba(0,0,0,0.1)) + 중간 반경(8px)
• 버튼: 버튼 색상과 맞춘 컬러 그림자로 깊이감
• 모달: 큰 그림자(0 20px 25px rgba(0,0,0,0.15))로 떠 있는 느낌
• 이미지: 원형 아바타(border-radius: 50%) 또는 둥근 썸네일(8–16px)
• 입력 필드: 눌림/포커스 상태를 위한 인셋 그림자
• 뉴모피즘 디자인: 밝고 어두운 그림자를 조합해 입체감

그림자 모범 사례

• 은은하게 사용: 보통 10–20% 불투명도면 충분
• Y-오프셋 > X-오프셋: 위에서 비추는 자연광을 모방
• 더 높은 느낌 = 더 큰 블러: 블러가 클수록 더 떠 보임
• 그림자 색상 맞추기: 요소 색상을 낮은 불투명도로 사용하면 통일감
• 성능: box-shadow 애니메이션은 피하고 opacity/transform을 권장

인기 있는 그림자 스타일

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border Radius 패턴

• 없음(0px): 날카로운 모서리, 미니멀한 느낌
• 작게(4px): 입력/버튼에 은은한 라운딩
• 보통(8px): 카드/컨테이너 표준
• 크게(16px+): 친근하고 부드러운 느낌
• 알약형(999px 또는 50%): 태그/배지에 적합
• 원형(50%): 아바타/아이콘 버튼(정사각형 요소 필요)

고급 기법

• 여러 그림자: 그림자를 조합해 레이어드 효과
• 글로우 효과: 오프셋 없이 0 0 20px [color]
• 뉴모피즘: 좌상단 밝은 그림자 + 우하단 어두운 그림자
• 포커스 링: 접근성을 위한 컬러 섀도우(0 0 0 3px rgba(color,0.5))
• 3D 효과: 오프셋과 블러를 증가시키는 다중 그림자

브라우저 지원

box-shadow와 border-radius는 모든 최신 브라우저에서 지원됩니다. IE8 이하에서는 벤더 프리픽스 (-webkit-box-shadow, -moz-box-shadow)가 필요할 수 있지만, 현재는 거의 필요하지 않습니다.

💡 팁: hover 효과에서 box-shadow를 직접 애니메이션하면 비용이 큽니다. 대신 의사 요소(::before 또는 ::after)에 그림자를 만들고 opacity를 애니메이션하면, 동일한 시각 효과를 더 좋은 성능으로 얻을 수 있습니다(특히 모바일에서 유리).