박스 그림자 생성기
슬라이더로 그림자의 위치, 흐림, 퍼짐, 색을 조절하고 여러 겹을 쌓아 자연스러운 그림자를 만들어요. 완성된 box-shadow CSS를 바로 복사해요.
미리보기
상자 색
배경 색
모서리
그림자 층
사용 방법
1층 고르기오른쪽 위에서 고칠 그림자 층을 고르거나 새 층을 추가해요.
2값 조절위치, 흐림, 퍼짐, 색, 진하기를 슬라이더로 바꾸며 미리보기를 확인해요.
3코드 복사완성된 box-shadow 코드를 복사해서 CSS에 붙여 넣어요.
이런 때 쓰면 좋아요
카드나 버튼에 그림자를 넣으면 화면이 입체적으로 보이지만, 값 하나로 만든 그림자는 어딘가 딱딱하고 어색해 보이기 쉬워요. 실제 빛이 만드는 그림자처럼 보이려면 가까운 진한 그림자와 멀리 퍼지는 연한 그림자를 여러 겹 겹치는 게 좋아요.
이 도구는 그림자 층을 여러 개 쌓고 하나씩 조절할 수 있어요. 프리셋의 "겹겹이"는 그런 자연스러운 그림자의 예시예요. 상자 색과 배경 색, 모서리 둥글기도 바꿔 볼 수 있어서 실제 디자인에 가까운 상태로 확인할 수 있어요.
안쪽 그림자(inset)를 켜면 눌린 버튼이나 입력창처럼 안으로 들어간 느낌을 낼 수 있어요.
자주 묻는 질문
여러 겹 그림자는 어떻게 쓰나요?
box-shadow 값에 쉼표로 여러 그림자를 이어 쓰면 돼요. 이 도구가 만든 코드를 그대로 붙이면 됩니다.
그림자가 너무 많으면 느려지나요?
보통 페이지에서는 문제없어요. 다만 흐림이 아주 큰 그림자를 수백 개 요소에 넣고 애니메이션까지 하면 휴대폰에서 버벅일 수 있어요.
이미지 모양대로 그림자를 넣고 싶어요.
box-shadow는 상자 모양에만 생겨요. 투명 PNG의 모양을 따라가려면 filter: drop-shadow(...)를 쓰세요. 값의 순서는 같아요.
퍼짐에 음수를 넣으면요?
그림자가 상자보다 작아져요. 아래쪽에만 은은하게 깔리는 그림자를 만들 때 자주 써요.