🎨
무료 CSS 박스 그림자 생성기
라이브 미리보기, 다중 레이어 스태킹, 색상 선택기, 인세트 토글, 한 번의 클릭으로 복사가 가능한 CSS box-shadow 시각적 빌더. Material, 뉴모피즘, 글로우 프리셋을 포함합니다.
한 번 로드하면 오프라인에서도 작동
배경 미리보기
상자를 드래그하여 활성 레이어의 그림자 위치 조정 - 미세 제어는 Shift 키를 누르고 있으세요
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);프리셋
주요 용도
- 카드 UI 그림자대시보드, 제품 그리드 및 대시보드용 우아한 카드 그림자를 구축합니다.
- 버튼 누름 효과실제 깊이와 누르기 상태를 모방하는 버튼 그림자를 구축합니다.
- 뉴모르피즘 소프트 UI쌍을 이루는 밝음 + 어두운 그림자로 소프트 UI 뉴모르피즘 모양을 만듭니다.
- 모달 및 팝오버 그림자대화 상자 및 드롭다운을 위한 상승된 떠있는 느낌을 만듭니다.
- 글로우 및 포커스 링 효과발광 효과, 포커스 링 및 네온 스타일의 하이라이트를 만듭니다.
사용 방법
box-shadow 생성기는 완전한 클라이언트 측 React 도구입니다. 서버도 라이브러리도 없습니다. 그림자 레이어 객체 목록을 상태로 관리하고, 변경될 때마다 직접 작성한 rgba() 포매터로 올바른 CSS box-shadow 문자열을 조합해 React의 style prop으로 미리보기 요소에 바로 적용하므로 브라우저 자체 렌더링 엔진이 즉시 결과를 그립니다.
- 1레이어 매개변수를 포매터에 전달각 그림자 레이어는 x/y 오프셋, 블러, 스프레드, 16진 색상, 불투명도 값을 저장합니다. 변경될 때마다 작은 shadowToCss 함수가 정규식으로 16진 색상을 RGB 성분으로 바꾸고 rgba() 문자열을 조합합니다. 예: 0px 4px 12px 0px rgba(0, 0, 0, 0.15). 여러 레이어는 쉼표로 연결됩니다.
- 2브라우저가 실시간 미리보기를 렌더링조합된 문자열은 JSX에서 div 요소의 boxShadow 스타일 속성에 직접 할당됩니다. React가 DOM 속성을 업데이트하면 브라우저의 CSS 엔진이 즉시 그림자를 그립니다. 캔버스나 WebGL 없이 기본 CSS 렌더링만 사용합니다.
- 3끌어서 위치 지정은 Pointer Events API 사용미리보기 상자를 클릭하고 끌면 요소에 setPointerCapture를 호출한 뒤 onPointerMove 변화량을 추적해 활성 레이어의 x, y 오프셋을 실시간으로 업데이트합니다. Shift를 누르고 있으면 0.25배 배율이 적용되어 세밀하게 위치를 조정할 수 있습니다.
- 4결과를 클립보드에 복사같은 레이어 데이터로 두 가지 출력 형식을 만듭니다: 표준 CSS box-shadow 선언과, Tailwind 구문 규칙에 따라 공백을 밑줄로 바꾼 Tailwind 임의 값 클래스(shadow-[...])입니다. 원클릭 복사에는 navigator.clipboard.writeText를 사용합니다.