Animated Gradient

CSS 애니메이션으로 부드럽게 움직이는 그라데이션 효과

애니메이션 속도: 8s

속도가 낮을수록 더 빠르게 움직입니다

1️⃣ 배경 그라데이션

2️⃣ 텍스트 그라데이션

Gradient Text

3️⃣ 보더 그라데이션

움직이는 보더로 강조 효과

4️⃣ 실제 활용

💡 구현 기법

✓ background-size: 400% — 그라데이션보다 큰 배경 영역
✓ background-position 애니메이션 — 배경이 움직이는 효과
✓ background-clip: text — 텍스트에만 적용
✓ border-image gradient — 보더에 그라데이션 적용
✓ ease / linear — 부드러운 vs 일정한 속도

⚡ 성능 팁

렌더링 비용을 줄이려면 will-change: background-position을 사용하고, 큰 면적에는 지양하는 게 좋습니다.