CSS can’t animate gradients, but SVG can

By Matt Visiwig Mar 30, 2022

Want to animate gradients for your website, but sad that CSS can’t help? Well it’s time to learn about SVG gradients and how to animate them. Animation preview, code, and video below.

Here’s a live preview of the Animated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
   <defs>
      <linearGradient id='a' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='1' y2='1'>
         <stop offset='0' stop-color='red'>
            <animate attributeName="stop-color"
               values="red;purple;blue;green;yellow;orange;red;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='.5' stop-color='purple'>
            <animate attributeName="stop-color"
               values="purple;blue;green;yellow;orange;red;purple;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='1' stop-color='blue'>
            <animate attributeName="stop-color"
               values="blue;green;yellow;orange;red;purple;blue;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <animateTransform attributeName="gradientTransform" type="rotate" from="0 .5 .5" to="360 .5 .5"
            dur="20s" repeatCount="indefinite" />
      </linearGradient>
      <linearGradient id='b' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='1' y2='1'>
         <stop offset='0' stop-color='red'>
            <animate attributeName="stop-color"
               values="red;purple;blue;green;yellow;orange;red;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='1' stop-color='purple' stop-opacity="0">
            <animate attributeName="stop-color"
               values="purple;blue;green;yellow;orange;red;purple;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <animateTransform attributeName="gradientTransform" type="rotate" values="360 .5 .5;0 .5 .5" class="ignore"
            dur="10s" repeatCount="indefinite" />
      </linearGradient>
   </defs>
   <rect fill='url(#a)' width='100%' height='100%' />
   <rect fill='url(#b)' width='100%' height='100%' />
</svg>