A worked example, rendered from real sample data. Sign in to run the tool on your own input.
#667eea
#764ba2
#f093fb.gradient-bg {
background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb);
background-size: 300% 300%;
animation: gradient-shift 9s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* background-size must exceed 100% — background-position can only travel across the overflow. */
@media (prefers-reduced-motion: reduce) {
.gradient-bg { animation: none; }
}
/* HTML: <div class="gradient-bg" style="min-height:220px">Content</div> */
Generate animated gradient backgrounds with CSS. Part of the DevTools Surf developer suite. Browse more tools in the Animation / CSS collection.