CSS Box Shadow 생성기

쓰는 법

1. X, Y 슬라이더로 그림자 방향/거리 설정.
2. 블러 슬라이더로 부드러움 조정, 스프레드로 크기 조정.
3. 색상 선택기에서 색 고르고 불투명도 값(0~1) 조정.
4. inset(내부 그림자) 토글로 눌린 효과 실험.
5. '레이어 추가' 눌러서 그림자를 겹쳐 깊이감 만들기.
6. 아래 CSS 코드창에서 복사.

자주 쓰는 패턴

카드 호버:
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1),
            0 8px 10px -6px rgba(0,0,0,0.1);

버튼 눌림:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

그림자 값, 숫자로 찍지 말고 눈으로 맞추기

box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)... 이거 값 하나 바꿀 때마다 어떻게 보이는지 상상이 잘 안 되잖아요. 여기는 슬라이더로 X/Y 오프셋, 블러, 스프레드를 움직이면 미리보기 박스에 바로 반영돼요. 맘에 드는 조합 찾으면 CSS만 복사해 가시면 됩니다.

내부 그림자(inset)도 되고, 여러 그림자를 쌓아서 깊이감 있는 효과도 만들 수 있어요.

여기 쓰면 편한 점

• 슬라이더 움직이자마자 미리보기 박스에 반영되니까 감 잡기 쉬워요.
• 레이어를 5개까지 쌓을 수 있어서 Material Design 스타일의 계층 있는 그림자도 만들 수 있어요.
• 오프셋, 블러, 스프레드, 불투명도를 각각 따로 조정 가능.
• inset 토글로 외부/내부 그림자 바로 전환.
• 뽑힌 CSS는 표준 문법이라 그대로 붙여 쓰면 돼요.

다른 Shadow 생성기랑 비교

자주 묻는 질문