박스 그림자 생성기
offset X/Y, blur, spread, opacity, inset와 색으로 CSS box-shadow 값을 구성합니다.
사용 방법
- shadow 색과 offset·blur·spread·opacity·inset을 조절합니다.
핵심 기능과 처리 범위
기준 HEX를 alpha rgba로 변환해 현재 control 값을 하나의 copyable declaration으로 만듭니다.
처리 원리
`${inset} xpx ypx blurpx spreadpx rgba(color,opacity)` 형식을 생성합니다.
예시
0 12px 24px 0에 35% opacity를 주면 부드러운 아래 그림자 preview가 나옵니다.
이럴 때 유용합니다
- card·modal의 box-shadow를 눈으로 조정할 때
사용 전 참고
- 여러 shadow layer를 직접 추가하거나 filter drop-shadow를 만드는 기능은 없습니다.
자주 묻는 질문
opacity는 HEX alpha로 저장되나요?
아닙니다. 현재 code는 rgba(...) 형태의 alpha color로 출력합니다.