CSS 그림자로 입체감 디자인하기
이 생성기가 하는 일
CSS 그림자에는 두 종류가 있습니다. box-shadow는 div, 버튼, 카드처럼 요소의 사각형 테두리 둘레에 그림자를 드리우고, text-shadow는 글자 하나하나의 뒤에 그림자를 깝니다. 이 생성기는 두 가지를 모두 다루는 시각 편집기로, 수평·수직 오프셋, 흐림(blur), 확장(spread), 색상, 불투명도를 슬라이더로 조절하며 값을 바꾸는 순간 미리보기가 다시 그려집니다. 원하는 모습이 나오면 그에 맞는 CSS가 바로 복사할 수 있는 형태로 출력됩니다.
픽셀 값을 손으로 어림잡는 대신, 실제 박스·버튼·카드·제목 위에서 그림자를 다듬고 정확한 box-shadow 또는 text-shadow 선언을 그대로 읽어 올 수 있습니다.
언제 쓰면 좋은가
요소가 페이지에서 떠오른 듯 보이게 하려면 box-shadow를 씁니다. 카드의 Material 스타일 입체감, 부드럽게 떠 있는 메뉴, 눌린 버튼의 들어간 느낌 같은 것들입니다. text-shadow는 타이포그래피용으로, 복잡한 배경에서 제목을 떼어 내는 은은한 그림자나 로고 글자 뒤의 색 있는 글로우(발광)에 어울립니다.
기존 디자인을 재현하기에도 빠릅니다. Material, Raised, Floating, Glow 같은 프리셋을 출발점으로 불러온 뒤, 참고하는 시안에 그림자가 맞아떨어질 때까지 오프셋과 불투명도를 미세하게 조정하면 됩니다.
예시: 그림자 겹치기
그림자가 하나라면 box-shadow: 0 4px 6px rgba(0,0,0,0.1); 처럼 읽힙니다. 수평 오프셋은 없고, 아래로 4px, 흐림 6px, 그리고 옅은 반투명 검정입니다. 진짜 입체감을 내려면 두 개를 겹칩니다. 요소에 바짝 붙는 좁고 진한 그림자와, 바깥으로 넓게 퍼지는 크고 부드러운 그림자입니다. 레이어를 추가하면 도구가 쉼표로 이어 줍니다: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. 각 레이어는 저마다의 오프셋·흐림·확장·색상을 그대로 유지합니다.
세부 사항과 예외 상황
Offset X와 Y는 그림자를 오른쪽·아래로 옮기고(음수 값이면 왼쪽·위로), blur는 가장자리를 부드럽게 하며, spread는 흐림을 적용하기 전에 그림자를 키우거나 줄입니다. 이 spread는 text-shadow에는 없는 속성입니다. Inset을 켜면 그림자가 안쪽으로 뒤집혀, 눌린 버튼과 움푹 들어간 입력란의 모습을 만들어 냅니다. 글자 그림자는 은은하게 유지하세요. 글자 뒤에 강한 흐림이나 높은 불투명도를 두면 가독성이 떨어집니다. 마음에 들면 CSS를 클릭 한 번으로 복사하거나 내려받아 스타일시트에 곧바로 붙여 넣으면 됩니다.