Animating Gradients

Gradient Animations

Gradients cannot be transitioned directly, but you can animate background-position or use CSS variables to create movement.

Example

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

CSS

Full Editor

Pro Tip

The shimmer/skeleton-loading pattern uses animated gradient background-position.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned