`text-shadow`와 `border-shadow`

text-shadow 속성 값으로 그림자 크기와 안으로 넣기를 설정할 수 없다는 것을 제외하면 border-shadow 속성과 text-shadow 속성은 비슷합니다.

그림자 색상 설정

text-shadow 속성의 네번째 값으로 그림자 색상을 설정합니다.

div {
  color: yellow;
  font-size: 150px;
  text-shadow: 10px 0 0 gray;
}

<div>ㄱ ㄴ ㄷ</div>

색상을 지정하지 않으면 그림자 색상은 글꼴 색상과 같습니다.

text-shadow 속성의 첫번째 값으로 그림자 위치를 왼쪽 또는 오른쪽으로 이동합니다. 0보다 작은 값을 입력하면 왼쪽으로 이동합니다.

text-shadow 속성의 두번째 값으로 그림자 위치를 위 또는 아래로 이동합니다. 0보다 작은 값을 입력하면 위로 이동합니다.

실제 그림자처럼 보이도록 그림자 주변을 뭉갤 수 있습니다. 이를 blur 효과라고 하는데 text-shadow 속성의 세번째 값으로 뭉갤 범위를 설정할 수 있습니다.

text-shadow 속성의 각 값을 잘 조합하면 의미있는 그림자 효과를 줄 수 있습니다.

div {
  color: yellow;
  font-size: 150px;
  text-shadow: 3px 3px 15px gray;
  letter-spacing: -30px;
}