Gradient Tools

CSS Gradient Animation Generator

Generate animated CSS gradients

CSS

@keyframes shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.animated-bg { background: linear-gradient(270deg,#3B82F6,#A855F7,#EF4444); background-size:600% 600%; animation: shift 12s ease infinite; }