CSS 박스 섀도 생성기

개발자 유틸리티

오프셋, 흐림, 확산, 색상 슬라이더로 박스 그림자를 만들고 CSS를 복사하세요.

사용 방법

Build a shadow

Move the sliders to adjust the horizontal offset, vertical offset, blur and spread. Choose a color and enable inset for an inner shadow.

Adjust the four sliders.
Pick a shadow color.
Copy the generated box-shadow declaration.

Negative values

Offsets and spread accept negative values, which move the shadow up or left and shrink it.

자주 묻는 질문

What is spread?

Spread expands or contracts the shadow before it is blurred. Positive values make the shadow larger.

Why is my shadow translucent?

The generated color includes partial transparency so the shadow blends with the background. Replace the color value if you want it fully opaque.

관련 도구

모서리 반경 생성기 각 모서리의 CSS border-radius 값을 픽셀 또는 퍼센트로 미리 보고 복사하세요. CSS 그라디언트 생성기 실시간 미리보기와 복사 가능한 CSS로 선형 또는 방사형 CSS 그라디언트를 디자인하세요. CSS 포매터 한 줄에 하나의 속성과 일관된 들여쓰기로 CSS를 정리합니다. UUID / GUID 생성기 무작위 버전 4 UUID를 생성하고 하나씩 또는 일괄로 복사합니다. 해시 생성기 모든 텍스트의 MD5, SHA-1, SHA-256, SHA-512 다이제스트를 계산합니다. 타임스탬프 변환기 Unix 타임스탬프, ISO 8601, 사람이 읽을 수 있는 현지 날짜 사이를 변환합니다.