Post
Joe Taylor
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