사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

생성된 코드와 노트를 사용 전에 확인하세요.

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

X와 Y 이동값, 흐림, 확산, 색상을 조절할 수 있고 필요하면 inset도 켤 수 있습니다. 결과는 box-shadow 선언이나 Tailwind의 shadow-[…] 클래스로 내보냅니다.

기본값은 어두운 배경 위에 떠 있는 카드의 그림자를 가정합니다.

입력

0 8px 24px 0 rgba(0,0,0,0.2)

출력

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);

UI에 쓰는 부드러운 그림자는 기본 스케일에서 벗어나기 쉬우므로 임의 값으로 지정하면 의도한 느낌이 유지됩니다.