CSS Box Shadow 생성기

사용법

1. 프리셋을 고르거나 처음부터 시작하세요.
2. 각 레이어의 offset·blur·spread·color를 조정하세요.
3. 내부 그림자가 필요하면 Inset을 켜세요.
4. CSS 규칙이나 Tailwind 클래스를 복사하세요.

자주 묻는 질문

Blur와 Spread 차이는?

Blur는 그림자 경계를 부드럽게 — 투명으로 사라지는 거리. Spread는 흐림 전에 그림자 모양 자체를 키우거나 줄임 (음수면 안쪽으로 끌어당김).

레이어를 여러 개 쓰는 게 좋은가요?

자연스러운 그림자는 보통 2개 이상이 필요합니다 — 가까이 진한 레이어 + 멀리 흐릿한 레이어. Material Design이나 Tailwind 기본 그림자도 모두 다중 레이어입니다.

왜 HEX 대신 rgba()?

투명도가 있는 색이 배경에 자연스럽게 녹아들어 더 사실적입니다. rgba()는 알파(투명도)를 직접 지정할 수 있습니다.

Tailwind 클래스의 밑줄은?

Tailwind는 공백을 클래스 구분자로 취급해서, 임의값에선 공백 대신 밑줄을 씁니다.

관련 도구