[css] 텍스트에 그라데이션 효과주기

cssgradient

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

예시

• html

<h1>텍스트 그라데이션</h1>코드를 입력하세요

• css

h1 {
  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);
}