[Animated Gradient] 움직이는 그라데이션

제작 과정

한 줄 요약

background-position을 애니메이션하면 배경이 끊임없이 흘러가는 그라데이션 효과를 만들 수 있습니다.

이럴 때 필요해요

랜딩 페이지, 히어로 섹션, 버튼, 카드 배경 등을 더 눈에 띄게 표현하고 싶을 때 사용합니다. 정적인 그라데이션보다 훨씬 모던해 보이고 사용자의 시선을 끕니다.

어떻게 동작하나

그라데이션 크기를 배경보다 크게 설정 (background-size: 400%)
background-position을 0% 100% 0%로 무한 반복
각 방향(상하좌우)의 색상을 고르게 분산하면 부드러운 전환 효과
속도는 animation-duration으로 조절

놓치기 쉬운 것

background-size가 작으면 애니메이션이 끊겨 보입니다
너무 빠른 애니메이션은 사용자를 피로하게 합니다 (8-10초 권장)
큰 영역에 적용하면 성능에 영향을 줄 수 있으니 will-change 사용을 고려하세요
어두운 배경에 밝은 텍스트를 올릴 때는 충분한 명도 대비를 유지하세요

이런 곳에 써요

랜딩 페이지 히어로 섹션
Call-to-Action 버튼
카드 호버 효과
배경 또는 구분선
프리미엄 기능 강조

'use client'; import { AnimatedGradientDemo } from './-components/AnimatedGradientDemo'; export default function AnimatedGradientPage() { return ( <div className="bg-black min-h-screen"> <AnimatedGradientDemo /> </div> ); }