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; } }