CSS box-shadow 생성기

언제 사용하나요?

카드, 버튼, 팝오버 등 UI 요소에 그림자 효과를 추가할 때 슬라이더로 값을 조정하며 실시간으로 미리보고 CSS를 생성합니다.

사용 방법

• 수평·수직 오프셋, 블러, 스프레드, 색상을 슬라이더로 조정합니다.
• 미리보기에서 그림자 효과를 실시간으로 확인합니다.
• 생성된 box-shadow CSS를 복사합니다.

입력값 안내

그림자의 X/Y 축 오프셋, 흐림 정도(Blur), 확산 정도(Spread), 그림자 색상, 투명도 값을 슬라이더로 조절합니다.

계산·변환 기준

슬라이더로 변경된 값들을 조합하여 `box-shadow: [X-offset] [Y-offset] [Blur] [Spread] [Color]` 형태의 CSS 규칙 문자열을 동적으로 생성하고, 미리보기 요소의 `style.boxShadow` 속성에 실시간으로 주입합니다.

사용 예시

• UI 그림자 조정 - 카드나 팝오버에 쓸 그림자를 미리 보며 생성합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• X: 10px, Y: 10px, Blur: 5px, Color: #000 → box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5)
• X·Y 0, Blur 20 옅은 검정 → 카드가 떠 보이는 부드러운 그림자 생성

주의사항

• 생성된 box-shadow CSS는 참고용입니다. 여러 그림자를 겹치면 성능에 영향을 줄 수 있으니 실제 환경에서 확인하세요.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

Box Shadow 속성 구조

box-shadow는 수평offset 수직offset 흐림반경 퍼짐반경 색상 순으로 값을 지정합니다. inset 키워드를 앞에 붙이면 요소 안쪽 그림자가 됩니다.

여러 그림자 겹치기

쉼표로 구분해 여러 개의 그림자를 동시에 적용할 수 있습니다. 미세한 그림자와 넓게 퍼지는 그림자를 함께 써서 입체감을 표현하는 기법이 많이 쓰입니다.

자주 묻는 질문

투명도도 조절되나요?

네, 색상과 알파 값을 함께 조절할 수 있습니다.

그림자 결과를 미리 볼 수 있나요?

네. 슬라이더를 조절하면 미리보기 상자에 그림자가 실시간으로 반영됩니다.

그림자를 여러 개 겹칠 수 있나요?

생성된 box-shadow 값을 쉼표로 이어 붙이면 여러 그림자를 겹쳐 표현할 수 있습니다.

그림자를 안쪽으로 넣을 수 있나요?

inset 옵션을 켜면 요소 안쪽으로 들어가는 그림자를 만들 수 있어 눌린 듯한 효과를 줄 수 있습니다.

관련 도구

• CSS border-radius 생성기 - 미리보기로 둥근 모서리 값을 확인하고 border-radius CSS를 생성합니다.
• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• 색상 코드 변환기 - HEX, RGB, RGBA, HSL, HSLA 색상 코드를 서로 변환하고 색상을 미리봅니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.