
Last night, I couldn’t help myself — something unexpected caught my eye.
I spotted a web effect I thought impossible in current browsers, running on a Webflow site (with custom code). Naturally, I had to know how it worked. Hours later, I realised it broke a design barrier I’d long accepted, unlocking new creative potential.
This CSS technique creates a glowing, rotating border on a button without a solid fill, letting the background show through — something that usually required clunky workarounds. This method solves it cleanly.
How it works:
@property: animates CSS variables for the glow
multiple backgrounds (padding-box & border-box): black interior + conic-gradient border
mix-blend-mode: screen: makes the black interior transparent, preserving button text
conic-gradient(): powers the rotating shine
Together, these produce a performant, transparent, animated border in pure CSS. Check it out codepen.io/joebentaylor/...
0:00

0:00 / 0:00