minstudio

살아 숨 쉬는 그라데이션 텍스트 (Animated Gradient Text)

랜딩 페이지의 메인 카피를 돋보이게 만들 때 사용하는 화려한 텍스트 효과입니다. background-clip: text를 사용하여 글자 내부에만 그라데이션을 적용하고, 배경 사이즈(background-size)를 넓힌 뒤 background-position을 애니메이션으로 이동시켜 글자색이 오로라처럼 변하게 만듭니다.
<div class="gradient-text-wrapper">
  <h1 class="animated-gradient-text">CSS is Awesome!</h1>
</div>
실행 결과
살아 숨 쉬는 그라데이션 텍스트 (Animated Gradient Text) | Minstudio