Animating a repeating conic gradient

July 12, 2022


I was working on a new website for my wife and we had the idea of creating an interesting effect within her main call-to-action. It involved a "sunburst" effect with a very subtle animation. The finished product can be seen below. I decided to write something up quick because I couldn't find any articles on this as I was researching it.

Unfortunately, there is no way to animate this with pure CSS, I had to use some JavaScript (gsap) to acheive the effect.

For the HTML, this effect actually has two things going on, a regular radial gradient applied to .blue-gradient-2 and then a "sunburst" effect using that doesn't contain color, just shading via rgba(0,0,0,.5);

Just show me the code


<section class="py-8 px-4 blue-gradient-2">
<div class="blue-gradient-bg-2"></div>
<div class="max-w-5xl m-auto md:flex gap-4 items-center">
class="text-xl md:text-xl text-white font-serif italic m-0 md:w-2/3 text-white"

Contact me for your free 15 minute phone consultation. I can help you
decide if I’m a good fit for what you’d like to accomplish.
class="block text-xl w-full md:w-1/3 mt-4 md:mt-0 text-center button"
Free Consultation</a



.blue-gradient-2 {
position: relative;
background: white;
background: radial-gradient(
farthest-corner at 0px 0px,
var(--main-color) 0%,
rgba(18, 57, 111, 0.927) 100%
z-index: 1;

.blue-gradient-2 .blue-gradient-bg-2 {
position: absolute;
inset: 0;
background-image: repeating-conic-gradient(
from 0deg at 100% 100%,
rgba(255, 255, 255, 0.5) 0 9deg,
rgba(0, 0, 0, 0) 9deg 18deg
z-index: 2;

.blue-gradient-2 * {
position: relative;
z-index: 3;


This is really where the magic happens. GSAP takes over the heavy lifting and animates the conic-gradient's degree property smoothly.

"repeating-conic-gradient(from 0deg at 50% 205%, rgba(0, 0, 0, .075) 0 9deg, rgba(0, 0, 0, 0) 9deg 18deg)",
"repeating-conic-gradient(from 45deg at 50% 205%, rgba(0, 0, 0, .075) 0 9deg, rgba(0, 0, 0, 0) 9deg 18deg)",
duration: 90,
repeat: -1,