← All elements
<div class="go"></div>About this animation
A glowing sphere whose conic gradient turns slowly, softened with a blur halo behind it.
How it works
A conic gradient circle spins, a dark inner circle turns it into a ring, and a blurred copy behind it provides the glow through a pseudo-element with inherit background.
Ways to customise it
- Change the five gradient colours.
- Make the hole bigger by raising inset.
- Speed up the 6s rotation.
Good to know
A blur filter on a large element can be heavy on weak devices, so keep it small. Rotation stops under reduced motion.
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.