text-gradient 텍스트에 그라데이션 효과 주기

css

.cnt-flex .txt .t1 .txt-gra{

    background: linear-gradient(
        307deg, #ff5252 0%, #7700ff 100%
      );
      background: -webkit-linear-gradient(
        307deg, #ff5252 0%, #7700ff 100%
      );
      background: -moz-linear-gradient(
        307deg, #ff5252 0%, #7700ff 100%
      );
      background: -o-linear-gradient(
        307deg, #ff5252 0%, #7700ff 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      clip-path: inset(1px);
}

1. 그라디언트 배경 설정

background: linear-gradient(307deg, #ff5252 0%, #7700ff 100%);
linear-gradient(각도, 색상1 %, 색상2 %)

→ 307도 방향으로 빨간색(#ff5252) → 보라색(#7700ff) 그라디언트를 설정
-webkit-, -moz-, -o-
→ 크로스 브라우징(브라우저별 호환성) 지원을 위한 추가 설정

2. 텍스트에 배경 적용

-webkit-background-clip: text;
background-clip: text;

배경을 텍스트에만 적용하는 설정
→ 즉, 텍스트가 그라디언트 색상을 가짐

3. 투명한 글자색 설정

css

-webkit-text-fill-color: transparent;

텍스트의 내부 색상을 투명하게 만들어, 배경(그라디언트)이 보이도록 함

4. 텍스트 데코레이션 관련 설정

-webkit-box-decoration-break: clone;

여러 줄의 텍스트가 있을 때, 각 줄마다 배경 스타일을 독립적으로 적용하는 설정

5. 클립 패스 설정

clip-path: inset(1px);

clip-path는 요소의 특정 부분만 보이게 하는 속성
inset(1px)은 요소의 모든 방향에서 1px만큼 잘라냄
→ 텍스트 테두리 부분이 조금 잘려 보일 수 있음

css 적용 사이트

개발사이트