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

HOME > css

css를 사용하여 gradient 텍스트 만드는 방법

Last Modified : 2018-11-23 / Created : 2017-09-01
7,836
View Count
css를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.



# backround에 gradient 적용하는 방법

먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 css효과입니다. 이때 CSS에 적용방법은 아래와 같이 사용합니다.

background: linear-gradient { 방향, 색상1, 색상2 ...}

더 자세하게 아시려면 아래 링크를 클릭하세요! >
http://webisfree.com/2014-09-04/[css]-background-속성-및-옵션값-그라데이션-사용법




# CSS를 사용한 텍스트 그라디언트 효과 예제보기

아래는 red에서 blue색으로 점차 변하는 linear-gradient를 텍스트에 적용하여 출력하는 예제입니다.
<span class="text-gradient">webisfree.com</span>
아래는 CSS에 적용하는 코드입니다.

.text-gradient {
    background: -webkit-linear-gradient(30deg, red, blue);
    color: transparent;
    -webkit-background-clip: text;
    font-size: 3em;
}

참고로 브라우저가 웹킷인 경우에만 -webkit-background-clip 에서만 text가 가능합니다. 그럼 아래에서 어떻게 나타나는지 실제로 확인해보세요.

Previous

CSS3 animation으로 carousel 만들기

Previous

css 폰트 바꾸기, font-face를 적용하기