박스 섀도우 생성기

오프셋, 흐림, 확산 및 색상을 사용하여 레이어된 상자 그림자를 디자인합니다. 카드를 미리 본 다음 클릭 한 번으로 CSS를 복사할 수 있습니다.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

오프셋, 흐림, 확산 및 색상을 사용하여 레이어된 상자 그림자를 디자인합니다. 실시간 미리보기가 포함되어 있습니다.
브라우저에서 실행됩니다.
무료로 사용 가능

사용 방법

오프셋, 흐림 및 확산을 조정합니다.
색상과 불투명도를 선택하거나 레이어를 추가합니다.
상자 그림자 CSS를 복사합니다.

How this tool works

오프셋, 흐림 및 확산을 조정합니다.
색상과 불투명도를 선택하거나 레이어를 추가합니다.
상자 그림자 CSS를 복사합니다.

Recommended settings

먼저 기본 옵션을 사용한 다음 필요한 경우 조정하세요.

Supported formats

Text / on-page input

File size and limits

매우 복잡한 다중 레이어 미리보기는 구형 휴대폰에서 느리게 느껴질 수 있습니다.

Privacy

색상 및 CSS 생성기는 브라우저에서 완전히 실행됩니다. 미리보기 및 변환에서는 스타일을 업로드하지 않습니다.

Common use cases

필요할 때마다 상자 그림자 생성기를 사용하세요. 오프셋, 흐림 효과, 확산 및 색상이 포함된 레이어 상자 그림자를 디자인하세요. 실시간 미리보기가 포함되어 있습니다.

Troubleshooting

붙여넣은 후 미리보기가 다르게 보입니다.

페이지에 경쟁 CSS가 있는지 확인하세요(재설정, 상속된 색상). 먼저 생성된 규칙을 격리된 스타일시트에 복사합니다.

FAQ

내 CSS가 업로드되나요?

아니요. 생성기와 변환기는 실시간 미리보기를 통해 브라우저에서 실행됩니다.

계정이 필요합니까?

아니요. 도구를 열고 컨트롤을 조정한 후 CSS를 복사하세요.