Coyote Labby Coyote Concept

NewCSS only · linear-gradient · background-position

Northern Lights

Slow, shifting northern-lights colours drift through the element, and pick up pace when you hover.

A free aurora gradient effect in HTML and CSS. Also known as northern lights background, animated mesh gradient, aurora button or moving gradient.

Class
.CCNorthern
Weight
0.8 KB
Needs
CSS only
Best for
Hero buttons, launches, premium plans

Tune it

Every snippet on this page follows these settings.

How the Northern Lights effect works

  1. A gradient through both accents and a violet is painted three times wider than the element.
  2. An endless alternate animation slides it from one end to the other.
  3. Hover shortens the cycle. On a headline, background-clip: text paints the colours into the letters instead.

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 CCNorthern">.
  4. That’s it. Northern Lights is CSS only.

Core components

Northern Lights on button, dropdown, card.

More ways to use it

The same class on badge, headline.

The Northern Lights code

The plain CSS behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCNorthern {
  border-color: transparent;
  color: var(--cc-on-accent);
  background: linear-gradient(115deg, var(--cc-accent), var(--cc-accent-2),
    color-mix(in srgb, var(--cc-accent) 40%, #7a5cff), var(--cc-accent)) 0 0 / 300% 100%;
  box-shadow: 0 10px 30px -12px var(--cc-accent);
  animation: ccNorthern calc(8s / var(--cc-speed)) ease-in-out infinite alternate;
}
.CCNorthern:hover,
.CCNorthern:focus-visible { animation-duration: calc(2.5s / var(--cc-speed)); }
.CCNorthern :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
.CCHeadline.CCNorthern { -webkit-background-clip: text; background-clip: text; color: transparent; box-shadow: none; }
@keyframes ccNorthern { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .CCNorthern { animation: none; } }

Pairs well with

Avoid on the same element Ember Glow (animation, box-shadow), Shimmer Border (animation, background), Liquid Fill (fill), Ink Pour (fill), Jelly (animation), Neon (animation, box-shadow), Stack Pop (box-shadow, fill), Metal (background, box-shadow, fill), Arrow Slide (fill), Soft Press (background, box-shadow), Grain (background, fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

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

Accessibility

  • Text sits in the on-accent colour over the gradient.
  • Holds still under reduced motion.

Performance

  • 0.8 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 Northern Lights

What is a aurora gradient effect?

Slow, shifting northern-lights colours drift through the element, and pick up pace when you hover. Northern Lights is a free aurora gradient effect, also known as northern lights background or animated mesh gradient, that works on buttons, dropdowns, cards and more.

How do you make a aurora gradient effect in CSS?

A gradient through both accents and a violet is painted three times wider than the element. An endless alternate animation slides it from one end to the other. Hover shortens the cycle. On a headline, background-clip: text paints the colours into the letters instead.

How do I add Northern Lights to a button?

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

Does Northern Lights need JavaScript?

No, it's CSS only.

Which browsers support Northern Lights?

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

Is Northern Lights accessible?

Text sits in the on-accent colour over the gradient. Holds still under reduced motion.

Can I use Northern Lights in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCNorthern to a button or block.

Is Northern Lights free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.