이 도구 소개

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

그림자를 여러 겹 쌓을 수 있나요?

생성기는 한 번에 한 겹의 그림자를 만듭니다. 여러 겹은 CSS에서 값을 쉼표로 이어 붙여 합치세요.

Tailwind 클래스는 어떻게 만들어지나요?

shadow-[…] 안에서는 공백이 밑줄로 바뀝니다. Tailwind가 임의 값을 읽는 방식입니다. rgba() 색 안의 공백은 도구가 이미 제거합니다.