웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS 레인보우(rainbow) 색상의 텍스트 만들기

Last Modified : 2019-08-02 / Created : 2019-06-18
12,992
View Count
CSS를 사용하여 텍스트에 특별한 효과를 만들 수 있습니다. 이번에는 무지개 효과를 만드는 방법에 대하여 알아봅니다. 어떻게 하면 무지개 효과를 만들 수 있을까요? 아래에서 확인해보세요.

 




# CSS 텍스트 무지개 효과 구현하기

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

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

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

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

위의 css 프로퍼티를 사용하면 원하는 무지개 효과를 적용하게 됩니다. 위 css의 원리를 생각해보면... 뒷 배경에 gradient 효과를 사용하여 무지개를 만들고 이 배경을 텍스트에만 적용할 수 있도록 하는 것이 가장 큰 원리입니다. 그리고 텍스트에는 배경이 비출 수 있도록 transparent 투명값을 준 것이죠.

그럼 이해를 돕기 위해서 간단한 예제를 만들어보겠습니다.


! CSS 텍스트 그림자 효과 예제보기

먼저 간단한 텍스트 문구를 만듭니다. 문구에는 'Hellow Rainbow'라는 텍스트를 적어볼께요/
<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가 핵심입니다. 그 아래는 좀 더 잘 보이도록 텍스트 볼드와 폰트 크기 조절입니다. 그럼 위 효과를 적용하면 어떻게 나타나는지 실제 구현된 모습을 아래에서 확인해보세요.

@ 실제 예제 구현된 모습
<span class="text-rainbow-test">Hello Rainbow!</span>

<style>
.text-rainbow-test {
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
font-size: 40px;
}
</style>



! 브라우저 지원

IE에서는 현재 지원되지 않습니다. 일부 css의 기능이 적용되지 않기 때문이죠.. 이를 해결하는 방법으로 위 방법이 아닌 svg를 사용하는 방법이 존재합니다 .svg의 mask 효과를 사용할 경우 동일하게 구현할 수 있으나 여기서는 다루지 않겠습니다. 참고만 해주세요.

아래의 글도 찾고 계시지 않나요?

    Previous

    css 프로퍼티 pointer-events property

    Previous

    CSS filter 프로퍼티 사용하여 블러 효과 적용하기, blur