ToolAtlas오프셋·흐림·퍼짐·색으로 CSS 그림자 문자열을 만듭니다. 중고 거래 사진에 그림자를 픽셀로 구우는 포토샵 작업이 아닙니다.
티스토리 글 목록이나 사내 랜딩에 카드가 바닥에 붙어 보일 때, 가벼운 그림자 한 줄만 필요할 때가 있습니다. 이 페이지는 box-shadow를 만들고 복사합니다. 이력서 증명사진을 보정하거나 카톡 프로필에 그림자를 굽지 않습니다.
배경색 전환은 CSS 그라데이션입니다. 본문 글자가 읽히는지는 대비 검사입니다. px를 rem으로 바꾸려면 CSS 단위 환산입니다.
티스토리·사내 카드에 붙일 때
스킨 CSS에 카드 선택자를 찾고 한 줄만 더합니다. 그림자가 너무 진으면 본문처럼 보여 가독성이 떨어집니다. 카카오톡 인앱 브라우저로 블로그를 열면 그림자가 잘리거나 스크롤 성능이 떨어질 수 있으니, 블러를 키운 값을 모바일에서 한 번 확인하세요.
사람인·잡코리아 이력서 미리보기 카드 그림자를 여기서 맞출 수는 없습니다. 그 화면은 포털 CSS입니다.
복사할 값과 하지 않는 일
- 가로·세로 오프셋, 흐림, 퍼짐, 색을 맞춥니다.
- 나온 한 줄을 스타일에 붙입니다.
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);- 여러 층을 겹치면 브라우저가 더 그립니다. 머티리얼 토큰을 발급하지 않고,
filter: drop-shadow에디터도 아닙니다.
네이버 블로그 스마트에디터는 인라인 스타일을 깎는 경우가 있어, 스킨 CSS에 넣는 편이 더 오래 갑니다. 메일 서명 HTML에 같은 그림자를 넣으면 아웃룩이 무시하기도 합니다. 그때는 단색 테두리로 대체하세요.
코드는 탭에 남습니다. 디자인 시스템을 대신 작성하지 않습니다.