Demo de Animaciones de Fondo

Animate backgrounds using gradients, patterns, and colors. Creates ambient, engaging visual experiences.

1. Gradient Shift

Flowing multi-color gradient.

Gradient

background: linear-gradient(...);
background-size: 400% 400%;
animation: gradientShift 6s ease infinite;
					

2. Color Cycle

Smooth color transitions.

Colors

@keyframes colorCycle {
  0% { background-color: #ef4444; }
  25% { background-color: #f59e0b; }
  50% { background-color: #10b981; }
  75% { background-color: #3b82f6; }
}
					

3. Sliding Stripes

Moving diagonal stripes.

Stripes

background: repeating-linear-gradient(
  45deg, #667eea, #667eea 20px,
  #764ba2 20px, #764ba2 40px
);
animation: slideStripes 2s linear infinite;
					

4. Pulsing Radial

Expanding radial gradient.

Pulse

background: radial-gradient(...);
animation: pulseRadial 3s ease-in-out infinite;
					

5. Floating Pattern

Moving circular pattern.

Pattern

background-image:
  radial-gradient(...),
  radial-gradient(...);
animation: floatPattern 20s linear infinite;
					

6. Aurora Effect

Northern lights-style effect.

Aurora

background:
  linear-gradient(45deg, ...),
  linear-gradient(135deg, ...),
  linear-gradient(225deg, ...);
animation: aurora 10s ease infinite;
					

7. Matrix Rain

Falling lines effect.

Matrix

background:
  repeating-linear-gradient(...);
background-size: 100% 200%;
animation: matrixRain 2s linear infinite;
					

8. Mesh Gradient

Multiple radial gradients moving.

Mesh

background:
  radial-gradient(at 0% 0%, ...),
  radial-gradient(at 100% 100%, ...),
  radial-gradient(at 50% 50%, ...);
animation: meshMove 12s ease infinite;
					

💡 Puntos Clave

Gradient animation: Animate background-position with background-size larger than 100%
Performance: Background animations can be GPU-heavy; use sparingly
Layering: Combine multiple gradients for complex effects
Use cases: Hero sections, loading states, ambient backgrounds
Alternative: For complex animations, consider <canvas> or SVG

🎨 Background Animations