Animated Pattern Generator

Generate seamless, animated background patterns with pure CSS.

Color 1 (Pattern)

Color 2 (Background)

Speed (seconds for full cycle): 10s

.animated-pattern {
  background-color: #ec4899;
  background-image: repeating-linear-gradient(-45deg, #a855f7, #a855f7 10px, #ec4899 10px, #ec4899 20px);
  background-size: 28px 28px;
  animation: animated-pattern 10s linear infinite;
}

@keyframes animated-pattern {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}