Utilore

CSS 그림자 생성기

슬라이더를 움직이면 견본이 같이 바뀝니다. 그림자 하나로 부족하면 레이어를 쌓으세요. 실제 화면의 부드럽고 자연스러운 깊이는 그렇게 만들어집니다.

레이어

프리셋

사용 방법

  1. 무엇에 그림자를 넣을지 고릅니다. 블록인지 텍스트인지.
  2. 위치·흐림·색상을 정합니다. 견본이 바로 다시 그려집니다.
  3. 깊이가 필요하면 레이어를 더합니다. 옅은 그림자 두세 겹이 짙은 하나보다 낫습니다.
  4. 설정 아래의 CSS 한 줄을 복사합니다.

알아두면 좋은 점

텍스트 그림자에 설정이 적은 이유

text-shadow 속성은 위치와 흐림과 색상만 받습니다. 확산과 내부 모드는 box-shadow만의 것이며, 값 하나만 더 써도 선언 전체가 무효가 됩니다. 브라우저는 조용히 버리고 그림자는 통째로 사라집니다. 그래서 텍스트 모드로 바꾸면 이 두 조절기는 숨겨집니다. 무시되기를 바라지 않습니다.

옅은 레이어 여러 겹이 짙은 하나보다 낫습니다

진짜 그림자는 고르지 않습니다. 물체 바로 아래는 진하고 멀어질수록 풀어집니다. 크게 흐린 그림자 하나는 회색 테두리만 만들지만, 위치를 달리한 옅은 레이어 두세 겹은 잘 만든 화면에서 보이는 깊이를 냅니다. 이 도구는 레이어마다 값을 따로 보관하고, 복사되는 줄에도 순서대로 나열합니다.

자주 묻는 질문

확산은 무엇을 하나요?

흐림이 적용되기 전에 그림자를 키우거나 줄입니다. 음수 값은 그림자를 안쪽으로 당겨 옆으로 삐져나오지 않게 합니다. 카드의 깔끔한 그림자가 바로 이 방법이며, 번짐이 블록 주위가 아니라 아래에 머무릅니다.

내부 그림자는 어떻게 만드나요?

「내부 그림자」를 체크하면 줄 앞에 inset이 붙고 그림자가 블록 안쪽으로 들어갑니다. 눌린 버튼과 입력란에 쓰이며, 깊이가 솟음이 아니라 눌림으로 읽혀야 하는 자리입니다.

그림자가 왜 안 보이나요?

대개 불투명도가 0이거나, 위치와 흐림이 모두 0이라 그림자가 블록 바로 뒤에 숨습니다. 부모 요소에 overflow: hidden이 있고 그림자가 보이는 영역 밖으로 나가도 사라집니다.

모든 브라우저에서 되나요?

됩니다. box-shadow와 text-shadow는 오래전부터 표준이며 접두사가 필요 없습니다. 여기서 나오는 값은 벤더 확장이 없는 평범한 CSS입니다.

관련 도구