CSS only · box-shadow · keyframes

Ember Glow

A slow breathing halo in the accent colour. Quicker breaths on hover, like it noticed you.

Class: .CCGlow
Weight: 0.6 KB
Needs: CSS only
Best for: Live status, new items, focus states

Tune it

Every snippet on this page follows these settings.

How Ember Glow works

A 1px accent ring and a soft outer shadow are both drawn with box-shadow.
A keyframe widens and brightens them halfway through, then settles back: one breath.
Hover shortens the cycle, so the element seems to react to you.

Add it to your site

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

Core components

Ember Glow on button, card, input, toggle, tabs.

More ways to use it

The same class on badge, loader, modal.

Pairs well with

Avoid on the same element Shimmer Border (animation).

Browser support

Chrome & Edge	111+
Safari	16.2+
Firefox	113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

Doesn't replace the focus ring.
Holds still under reduced motion.

Performance

0.6 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 Ember Glow

How do I add Ember Glow to a button?

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

Does Ember Glow need JavaScript?

No, it's CSS only.

Which browsers support Ember Glow?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Ember Glow accessible?

Doesn't replace the focus ring. Holds still under reduced motion.