Coyote Labby Coyote Concept

CSS only · @property · conic-gradient

Border Beam

A comet of light travels the border, forever. Draws the eye to one thing on the page without shouting.

Class
.CCBeam
Weight
0.9 KB
Needs
CSS only
Best for
Primary CTAs, the plan you want people to pick

Tune it

Every snippet on this page follows these settings.

How Border Beam works

  1. @property registers --cc-beam-angle as a real angle, which is what lets the browser animate it.
  2. A conic-gradient that's transparent for most of the circle, with a short bright arc, is drawn on ::after.
  3. A mask cuts away everything except a 1.5px ring, so only the border lights up.
  4. Animating the angle from 0 to 360 degrees sends the bright arc round and round.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCBeam">.
  4. That’s it. Border Beam is CSS only.

Core components

Border Beam on button, dropdown, card, input, tabs.

More ways to use it

The same class on nav bar, modal, image card.

Pairs well with

Avoid on the same element Moonrise (::after), Glare Sweep (::after), Spotlight (::after), 3D Tilt (::after).

Browser support

Chrome & Edge111+
Safari16.4+
Firefox128+

In browsers without @property (Firefox before 128) the beam shows as a still highlight.

Accessibility

  • Decorative only: the element's own border and focus ring are untouched.
  • Under reduced motion the beam becomes a still gradient border.

Performance

  • 0.9 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Border Beam

How do I add Border Beam to a button?

Add the class CCBeam next to CCButton, inside an element with the CCTheme class, then include the Border Beam CSS. The Copy button on this page gives you all of it in one snippet.

Does Border Beam need JavaScript?

No, it's CSS only.

Which browsers support Border Beam?

Chrome and Edge 111+, Safari 16.4+ and Firefox 128+. In browsers without @property (Firefox before 128) the beam shows as a still highlight.

Is Border Beam accessible?

Decorative only: the element's own border and focus ring are untouched. Under reduced motion the beam becomes a still gradient border.