Animated Pattern Generator
Generate seamless, animated background patterns with pure CSS.
.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; }
}