[HTML/CSS] 텍스트 그라데이션

Dev_Oh·2022년 6월 10일
1

CSS

목록 보기
1/2
post-thumbnail
<Style>
.text-gradient-pink-blue {
    background: -webkit-linear-gradient(-70deg, #db469f 0%, #2188ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    font-size:50px;
    font-wight:900;
    
}
</Style>
<span class="text-gradient-pink-blue">HELLO WORLD</span>
드를 입력하세요

linear-gradient(45deg, blue, red);
linear-gradient(to left top, blue, red);
linear-gradient(0deg, blue, green 40%, red);
linear-gradient(.25turn, red, 10%, blue);
linear-gradient(45deg, red 0 50%, blue 50% 100%);
linear-gradient(to right,red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

텍스트 그라데이션은 다양하게 표현 가능합니다
브라우저의 호환성에 주의해주세요.

profile
웹개발이 재밌다. 8년차 웹퍼블리싱

0개의 댓글