← All elements
<div class="sb"></div>About this animation
A starburst of rays built with repeating-conic-gradient and a mask, spinning slowly behind a bright centre.
How it works
A repeating-conic-gradient alternates two golds every ten degrees, which draws the rays. A radial-gradient mask fades the edges, so the burst glows out from the centre. The whole element then rotates slowly with a linear infinite keyframe.
Ways to customise it
- Change the two golds for another colour pair.
- Make rays thinner by lowering the 10deg values.
- Edit the 14s duration to spin faster.
Good to know
Decorative only and stops under reduced motion. Masking and conic gradients work in all current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.