CSS 그림자에서 Tailwind로

일반 그림자 → shadow / shadow-lg. 고유 그림자 → arbitrary.

자주 쓰는 그림자는 대응이 분명합니다. 은은한 높이는 shadow, 뚜렷한 입체감은 shadow-lg입니다. 여러 겹이거나 색이 들어간 브랜드 그림자는 임의 값이 되므로 원본과 나란히 놓고 확인하세요.

스케일 그림자

부드러운 box-shadow는 대개 shadow / shadow-md입니다. 단계가 많은 브랜드 그림자는 대개 shadow-[…]입니다.

필터

drop-shadow와 filter는 항상 1:1이 아닙니다. 유틸리티를 강요하기 전에 메모를 읽으세요.

정직한 elevation

변환기가 검토를 요청하면 “가장 가까운 shadow” 대신 brackets로 정확한 값을 유지하세요.

사용해보기

변환기 열기

.example { display: flex; gap: 1rem; padding: 1rem; }

신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.