Box Shadow 생성기
CSS box-shadow를 시각적으로 만들고 코드를 복사합니다
Subtle·Medium·Large·Elevated·Colored·Inset·Neumorphism 일곱 가지 프리셋에서 시작해 X·Y 오프셋(-50~50px), 블러(0~100px), 확산(-50~50px), 색상과 투명도를 각각 다듬을 수 있습니다. 그림자를 여러 겹 추가해 아래쪽은 진하고 넓게, 위쪽은 옅고 가늘게 쌓는 식의 레이어드 그림자도 한 줄 CSS로 뽑아냅니다. 미리보기 박스의 배경색을 바꿔 가며 실제 카드 색 위에서 어떻게 보이는지 확인한 뒤 복사하면 되므로, 디자인 시스템의 elevation 단계를 정의하는 작업에 특히 유용합니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Box Shadow, 이렇게 쓰세요
x·y 오프셋, 흐림(blur), 확산(spread), 색상·투명도를 슬라이더로 조절해 box-shadow CSS를 만듭니다. 여러 겹 그림자도 지원합니다.
카드·모달·드롭다운에 떠 있는 느낌을 줄 때, 디자인 툴의 그림자 값을 CSS로 재현할 때 사용합니다.
블러가 큰 그림자는 투명도를 10% 안팎으로 낮춰야 자연스럽습니다. 예: 0 12px 40px rgba(20,22,30,.08) 은 카드에 두루 쓰이는 값입니다.
같은 카테고리 도구
자주 묻는 질문
Q. 안쪽 그림자는 어떻게 만드나요?
inset 옵션을 켜면 요소 안쪽으로 그림자가 들어갑니다. 입력창의 눌린 느낌에 씁니다.
Q. 그림자가 성능에 영향을 주나요?
블러 반경이 큰 그림자를 애니메이션하면 리페인트가 잦아집니다. 움직이는 요소는 opacity 전환을 권합니다.
Q. 뉴모피즘 스타일은 어떻게 만드나요?
Neumorphism 프리셋을 누르면 오른쪽 아래 어두운 그림자와 왼쪽 위 밝은 그림자 두 겹이 한 번에 들어갑니다. 박스 색과 배경색을 같은 밝은 회색 계열로 맞춰야 효과가 살아납니다.