CSS Box Shadow 생성기
실시간 미리보기로 다층 CSS 박스 그림자를 시각적으로 구성 — 클릭 한 번으로 CSS 복사
Preview
Shadow Layers
(1/8)CSS Output
box-shadow: 0px 8px 24px -4px rgba(99, 102, 241, 0.5);
CSS Box Shadow Generator
Build multi-layer CSS box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity for each layer, then copy the ready CSS.
FAQ
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1).
How do I add multiple shadows?
Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.05).
What is an inset shadow?
Adding the 'inset' keyword makes the shadow appear inside the element rather than outside — useful for pressed button states.
계속 탐색
추천 개발자 도구 도구…
JSON 포맷터
구문 강조 및 오류 감지로 JSON 형식화, 유효성 검사 및 압축
Base64 인코더/디코더
텍스트 또는 파일을 Base64로 인코딩하고 Base64 문자열을 읽기 가능한 텍스트로 디코딩
URL 인코더/디코더
URL 구성 요소 및 쿼리 문자열 매개변수 인코딩 및 디코딩
UUID 생성기
무작위 UUID(v1, v4) 생성 또는 여러 UUID 일괄 생성
해시 생성기
텍스트 또는 파일에서 MD5, SHA-1, SHA-256, SHA-512 해시 생성
정규식 테스터
실시간 일치 강조 표시로 정규식 테스트
JWT 디코더
JSON Web Token 디코딩 및 검사 — 헤더, 페이로드 및 서명 확인
HTML 포맷터
적절한 들여쓰기와 구문 강조로 HTML 코드 형식화 및 정리