CSS 박스 그림자 생성 시각적으로
비주얼 에디터로 아름다운 박스 그림자를 디자인하세요. 다중 레이어, 오프셋, 블러, 스프레드, 투명도를 커스터마이즈하세요. CSS 코드를 즉시 복사하세요.
16px
그림자 레이어
투명도30%
X 오프셋0px
Y 오프셋4px
블러15px
스프레드0px
CSS 코드
box-shadow: 0px 4px 15px 0px rgba(99, 102, 241, 0.3);
그림자 프리셋
CSS 박스 그림자 만드는 방법
1
1. 그림자 레이어 추가
하나의 그림자로 시작하거나 여러 레이어를 추가하세요. 각 레이어마다 고유한 색상, 오프셋, 블러, 스프레드, 투명도를 설정할 수 있습니다.
2
2. 각 레이어 커스터마이즈
오프셋, 블러 반경, 스프레드, 투명도를 조절하세요. 내부 그림자를 위해 인셋 모드를 토글하세요. 프리셋으로 빠른 영감을 얻으세요.
3
3. CSS 복사
생성된 CSS 코드를 클릭 한 번으로 복사하고 스타일시트에 직접 붙여넣으세요. 모든 최신 브라우저에서 작동합니다.
자주 묻는 질문
이 CSS 박스 그림자 생성기는 무료인가요?
네, 100% 무료이며 제한이 없습니다. 회원가입 없이 원하는 만큼 박스 그림자를 만드세요.
여러 그림자 레이어를 추가할 수 있나요?
네! 여러 그림자 레이어를 추가하고 각각 독립적으로 커스터마이즈할 수 있습니다. 이를 통해 Material Design이나 뉴모피즘 스타일 같은 복잡한 레이어드 그림자 효과를 만들 수 있습니다.
인셋 그림자란 무엇인가요?
인셋 그림자는 요소 바깥이 아닌 안쪽에 나타나는 그림자입니다. 내부 발광이나 눌린 효과를 만들어냅니다. 아무 그림자 레이어에서든 Inset 버튼을 토글해 시도해 보세요.
내 데이터는 안전한가요?
물론입니다. 모든 처리는 브라우저에서 이루어집니다. 서버로 데이터가 전송되지 않습니다.