CSS Box Shadow 생성기
CSS box-shadow 값을 시각적으로 만듭니다. 실시간으로 미리 보고 생성된 CSS를 복사하세요.
box-shadow: 0px 8px 16px 0px #00000033;
CSS Box Shadow 생성기란 무엇인가요?
CSS의 box-shadow 속성은 수평 오프셋, 수직 오프셋, 흐림 반경, 확산 반경, 색상을 받습니다. 여러 그림자를 쌓아 계층적인 효과를 만들 수 있습니다. 이 시각적 생성기는 모든 조합에 대한 CSS를 생성합니다: 버튼, 카드, 깊이 효과에 유용합니다.
자주 묻는 질문
여러 그림자를 어떻게 쌓나요?▼
box-shadow 값에서 쉼표로 구분하세요. 그림자를 쌓으면 단일 그림자보다 더 사실적인 깊이감을 만들 수 있습니다.
흐림(blur)과 확산(spread)의 차이는 무엇인가요?▼
흐림(blur)은 그림자의 가장자리를 부드럽게 합니다. 확산(spread)은 그림자를 흐리게 하기 전에 그 크기를 키우거나 줄입니다.
관련 도구
색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 형식 간에 색상을 변환합니다. 색상을 시각적으로 선택하거나 값을 직접 입력하세요.
CSS 그라데이션 생성기
선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.
Cubic Bezier 가속 곡선 생성기
CSS용 cubic-bezier 가속 곡선을 만듭니다. 표준 사전 설정이 포함되어 있습니다.
색상 팔레트 생성기
임의의 기준 색상에서 조화로운 색상 팔레트를 생성합니다. 보색, 유사색, 삼색조, 단색 배색을 지원합니다.
CSS Border Radius 생성기
복잡한 CSS border-radius 값을 시각적으로 만듭니다. 각 모서리를 독립적으로 제어합니다.
CSS Clamp() 생성기
clamp()로 유동적이고 반응형인 CSS 값을 생성합니다. 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이를 부드럽게 조정합니다.