CSS only · background-clip · border-box
Shimmer Border
The outline itself is a slow-moving two-tone gradient. Quietly premium; works on light and dark.
- Class
.CCShimmer- Weight
- 0.5 KB
- Needs
- CSS only
- Best for
- Inputs, segmented controls, badges
Tune it
Every snippet on this page follows these settings.
How Shimmer Border works
- The element gets two backgrounds: its normal fill clipped to the padding box, and a gradient clipped to the border box.
- With a transparent border, the gradient shows through as the outline.
- The gradient is three times wider than the element and slides sideways forever.
Add it to your site
- Add the styles. Link
https://coyoteconcept.com/lab/cc-lab.cssonce, 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 CCShimmer">. - That’s it. Shimmer Border is CSS only.
Core components
Shimmer Border on button, input, tabs, card, dropdown.
More ways to use it
The same class on badge, nav bar, loader.
Pairs well with
Avoid on the same element Ember Glow (animation).
Browser support
| Chrome & Edge | 111+ |
|---|---|
| Safari | 16.2+ |
| Firefox | 113+ |
Older browsers show the element without the effect: nothing breaks.
Accessibility
- Keeps the element's own fill, so text contrast is unchanged.
- Holds still under reduced motion.
Performance
- 0.5 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 Shimmer Border
How do I add Shimmer Border to a button?
Add the class CCShimmer next to CCButton, inside an element with the CCTheme class, then include the Shimmer Border CSS. The Copy button on this page gives you all of it in one snippet.
Does Shimmer Border need JavaScript?
No, it's CSS only.
Which browsers support Shimmer Border?
Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.
Is Shimmer Border accessible?
Keeps the element's own fill, so text contrast is unchanged. Holds still under reduced motion.