CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that:

background: linear-gradient(
  to right, 
  red,
  red 50%,
  blue 50%,
  blue
);Code language: CSS (css)

To turn that into stripes, we can set the background-size smaller and let it repeat. But perhaps the more-correct tool is to use repeating-linear-gradient() which automatically handles, ya know, repeating the gradient.

background: repeating-linear-gradient(
  #d84315,
  #d84315 10px,
  #fbc02d 10px,
  #fbc02d 20px
);Code language: CSS (css)

I think it’s a bit lesser-known, but there is an updated syntax to gradients where you can list two color stop lengths instead of just one, so the above code actually can get a little simpler:

background: repeating-linear-gradient(
  #d84315 0 10px,
  #fbc02d 10px 20px
);Code language: CSS (css)

OK that took me a minute to get to the point lol.

It occurred to me that these hard-stops can work for conic-gradient() as well. I was literally trying to make a burst background and was pleasantly surprised when I tried this and it worked.

background-image: repeating-conic-gradient(
  black 0deg 10deg,
  #666 10deg 11deg
);Code language: CSS (css)

I was actually trying to set some text in the middle, so I wanted to start the burst away from the center. Easy enough with a radial gradient sitting on top of it.

While I was thinking about this, I happed to see the Robinhood homepage and it was pretty burstin’.

See how that burst has lines breaking it up. I bet you could figure out how to do that by laying on more radial gradients, or perhaps a repeating radial gradient with transparent color stops.

Ughgkgh fine I’ll do it.

But I’ll let you figure out how to animate that. I bet you could do it with @property on some custom properties that you sneak into those gradient definitions.

This also reminds me that I worked on some bursts one time that were a bit more randomized using SVG. Feel free to click to reset what’s going on below: