Gradient Animation

쉬움

부드럽게 변하는 그라디언트 애니메이션

#gradient#animation#background

라이브 데모

Animated Gradient

코드

GradientAnimation.tsx

export const GradientAnimation = () => {
  return (
    <div className="gradient-animation-box">
      <div className="gradient-animation-text">
        Animated Gradient
      </div>
    </div>
  );
};

effects.css

.gradient-animation-box {
  background: linear-gradient(
    45deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #f7dc6f,
    #ff6b6b
  );
  background-size: 300% 300%;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}