살아 숨 쉬는 그라데이션 텍스트 (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>