CSS를 사용하는 텍스트 효과 중 무지개 효과를 만드는 방법에 대하여 알아봅니다.
# CSS 텍스트 무지개 효과 구현하기
텍스트를 강조하는 방법으로 볼드 효과나 색 또는 그림자 효과를 많이 사용합니다. 하지만 제목 등에 좀 더 강조하려는 목적으로 또 다른 효과를 원하는 경우 무지개 효과를 생각해 볼 수 있습니다. 아래는 텍스트에 css를 사용하여 무지개 효과를 적용하는 방법입니다.

먼저 이를 구현하기 위해 아래의 css 프로퍼티를 사용해야 합니다.
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
// 배경색으로 무지개를 만듦

-webkit-background-clip: text;
// 배경색이 텍스트에만 적용되도록 함

color: transparent;
// 텍스트의 색을 투명으로 변경되어 배경색이 적용되도록 바꿈

위의 css 프로퍼티를 사용하면 원하는 무지개 효과를 적용하게 됩니다. 그럼 간단한 예제를 만들어보겠습니다.


! CSS 텍스트 그림자 효과 예제보기
먼저 간단한 텍스트 문구를 만듭니다.
<span class="text-rainbow">Hello Rainbow!</span>

다음으로 .text-rainbow에 css를 적용합니다.
.text-rainbow {
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
  -webkit-background-clip: text;
  color: transparent;

  font-weight: bold;
  font-size: 40px;
}

위에서 3줄의 css가 핵심입니다. 그 아래는 좀 더 잘 보이도록 텍스트 볼드와 폰트 크기 조절입니다. 그럼 위 효과를 적용하면 어떻게 나타나는지 실제 구현된 모습을 아래에서 확인해보세요.


! 브라우저 지원
IE에서는 현재 지원되지 않습니다. 다만 svg의 mask 효과를 사용할 경우 동일하게 구현할 수 있으니 참고하세요.

Hello Rainbow!