CSS의 text-shadow 속성을 사용하면 텍스트에 그림자 효과를 손쉽게 적용할 수 있습니다. 그림자는 하나만 추가할 수도 있지만, 쉼표(,)로 구분된 목록 형태로 값을 나열하면 하나의 텍스트에 두 개 이상의 그림자를 동시에 지정하는 것도 가능합니다.
text-shadow 속성의 기본 문법
text-shadow 속성은 아래와 같은 순서로 값을 작성합니다.
text-shadow: offset-x offset-y blur-radius color;
- offset-x: 그림자가 가로 방향으로 이동하는 거리
- offset-y: 그림자가 세로 방향으로 이동하는 거리
- blur-radius: 그림자의 흐림 정도(선택 사항)
- color: 그림자의 색상
여러 개의 그림자를 적용하려면 각 그림자 값 사이를 쉼표로 구분하면 됩니다. 앞에 작성된 그림자일수록 위쪽(앞 레이어)에 배치됩니다.
여러 그림자를 한 줄로 적용하는 예제
아래 예제는 빨강, 초록, 파랑 세 가지 그림자를 h1 제목 요소에 한 번에 적용한 코드입니다. 직접 실행해 보면서 여러 그림자가 어떻게 겹쳐지는지 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px red, 0 0 4px green, 0 0 5px blue;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>위 제목에는 여러 개의 텍스트 그림자 효과가 적용되어 있습니다.</p>
</body>
</html>이 예제에서는 오프셋 값을 모두 0으로 설정하고 흐림 반경만 3px, 4px, 5px로 조금씩 다르게 주었습니다. 그 결과 세 가지 색상의 그림자가 서로 겹치며 네온사인 같은 은은한 발광 효과가 만들어집니다. 이처럼 text-shadow 속성을 응용하면 글로우 효과, 입체적인 타이포그래피 등 다양한 디자인을 구현할 수 있습니다.