← All elements
<div class="gb"><div class="in">Glow border</div></div>About this border
A card with a colourful border that rotates around it, using @property to animate the angle of a conic-gradient.
How it works
A registered custom property --a is an angle. A conic-gradient starts from var(--a), and a keyframe animates --a from 0 to 360 degrees, which spins the rainbow around the card. The gradient is only visible in the three pixels of padding around the inner card, so it appears as a moving border.
Ways to customise it
- Change the colour stops of the conic-gradient.
- Edit the padding to make the border thicker.
- Change the 4s duration.
Good to know
@property is supported in current browsers, and older ones show a static gradient border. Check contrast of the text inside the card.
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.