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>
VIDEO