CSS 박스 섀도우 생성기
오프셋·블러·확산·색상·내부 그림자 옵션을 조절하며 box-shadow를 실시간 미리보기하고, 완성된 CSS 코드를 복사하는 무료 온라인 생성 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
임베드
최종 업데이트: 2026년 · 무료 온라인 도구
CSS 박스 섀도우 생성기란?
오프셋·블러·확산·색상·내부 그림자 옵션을 조절하며 box-shadow를 실시간 미리보기하고, 완성된 CSS 코드를 복사하는 무료 온라인 생성 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
사용 방법
- 1프리셋 선택— 프리셋 버튼으로 빠르게 시작하세요.
- 2슬라이더 조정— X/Y 오프셋, 블러, 확산 슬라이더로 그림자를 조정하세요.
- 3미리보기 확인— 상단 미리보기에서 실시간으로 결과를 확인하세요.
- 4CSS 복사— 복사 버튼으로 box-shadow CSS를 가져가세요.
관련 도구
CSS 그라디언트 생성기linear, radial, conic CSS 그라디언트를 비주얼 에디터로 만들고 색상 정지점과 각도를 조정해 CSS 코드를 복사하는 무료 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
CSS 보더 레디우스 생성기8개 모서리 값을 슬라이더와 핸들로 조절하며 border-radius 모양을 실시간 미리보기하고, 완성된 CSS 코드를 복사하는 무료 온라인 생성 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
CSS 플렉스박스 생성기justify-content·align-items·flex-direction 등 속성을 조절해 Flexbox 레이아웃을 실시간 미리보기하고 CSS 코드를 복사하는 무료 온라인 도구. 테스트·개발에 필요한 값을 즉석에서 만들어야 할 때 편리하며, 생성 과정이 모두 브라우저에서 실행되어 데이터가 서버로 전송되지 않고 회원가입 없이 무료로 사용할 수 있습니다.
컬러 코드 변환기HEX·RGB·HSL·OKLCH 색상 코드를 양방향으로 즉시 변환하고, 두 색상의 WCAG 대비비를 계산해 접근성 기준 충족 여부를 확인하는 무료 온라인 도구. CSV·JSON·색상·시간 등 서로 다른 데이터 형식을 변환해야 할 때 유용하며, 모든 처리가 브라우저 안에서 이뤄져 입력 데이터가 서버로 전송되지 않고 설치나 회원가입 없이 무료로 사용할 수 있습니다.
자주 묻는 질문
네, '그림자 추가' 버튼으로 여러 개의 그림자를 겹칠 수 있습니다.
네, 각 그림자에서 Inset 체크박스를 활성화하면 내부 그림자가 됩니다.
Subtle, Medium, Large, Inset, Double 5가지 프리셋을 제공합니다.
네, 색상 입력란에 rgba(0,0,0,0.15) 형태로 직접 입력할 수 있습니다.
아니요. 모든 계산은 브라우저에서 이루어집니다.