Coyote Labby Coyote Concept

NewCSS only · text-shadow · steps()

Neon

Flickers on like a sign warming up, then holds a steady glow around the edge.

A free neon flicker effect in HTML and CSS. Also known as neon sign button, neon glow border, flickering light animation or neon box-shadow.

Class
.CCNeon
Weight
0.8 KB
Needs
CSS only
Best for
Night-time brands, bars, events, gaming

Tune it

Every snippet on this page follows these settings.

How the Neon hover effect works

  1. On hover the border turns the accent colour and box-shadow lights it inside and out.
  2. Labels on buttons, badges and headlines get a stacked text-shadow glow.
  3. A steps(1) keyframe drops the opacity a few times in the first moment: the flicker of a tube catching.

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 CCNeon">.
  4. That’s it. Neon is CSS only.

Core components

Neon on button, dropdown, input, card.

More ways to use it

The same class on headline, badge, nav bar.

The Neon 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
.CCNeon { transition: box-shadow .3s, border-color .3s; }
.CCNeon:is(:hover, :focus-visible, :focus-within) {
  border-color: var(--cc-accent);
  box-shadow:
    0 0 calc(12px * var(--cc-intensity)) var(--cc-accent),
    inset 0 0 calc(10px * var(--cc-intensity)) color-mix(in srgb, var(--cc-accent) 50%, transparent);
  animation: ccNeon calc(1.1s / var(--cc-speed)) steps(1) both;
}
.CCNeon:is(.CCButton, .CCBadge, .CCHeadline):is(:hover, :focus-visible) {
  color: var(--cc-ink);
  text-shadow: 0 0 4px var(--cc-accent), 0 0 12px var(--cc-accent), 0 0 28px var(--cc-accent);
}
.CCHeadline.CCNeon:is(:hover, :focus-visible) { box-shadow: none; }
@keyframes ccNeon { 0%, 8%, 14%, 30% { opacity: 1; } 6%, 12%, 24% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .CCNeon:is(:hover, :focus-visible, :focus-within) { animation: none; } }

Pairs well with

Avoid on the same element Ember Glow (animation, box-shadow), Shimmer Border (animation), Jelly (animation), Northern Lights (animation, box-shadow), Stack Pop (box-shadow), Metal (box-shadow), Soft Press (box-shadow).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

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

Accessibility

  • The label stays the ink colour with glow around it, so it stays readable.
  • Plays on keyboard focus too.
  • Lights without flickering 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 Neon

What is a neon flicker effect?

Flickers on like a sign warming up, then holds a steady glow around the edge. Neon is a free neon flicker effect, also known as neon sign button or neon glow border, that works on buttons, dropdowns, text inputs, cards and more.

How do you make a neon flicker effect in CSS?

On hover the border turns the accent colour and box-shadow lights it inside and out. Labels on buttons, badges and headlines get a stacked text-shadow glow. A steps(1) keyframe drops the opacity a few times in the first moment: the flicker of a tube catching.

How do I add Neon to a button?

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

Does Neon need JavaScript?

No, it's CSS only.

Which browsers support Neon?

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

Is Neon accessible?

The label stays the ink colour with glow around it, so it stays readable. Plays on keyboard focus too. Lights without flickering under reduced motion.

Can I use Neon 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 CCNeon to a button or block.

Is Neon 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.