How to Make a Glow Button in Tailwind CSS

By Syed · Frontend Engineer & Creator of UITweak

Updated October 2026 · 9 min read

Most buttons on the web are flat rectangles that ask politely to be clicked. On a dark landing page full of gradients and product shots, a polite button disappears. The glow button solves that with a halo of brand-colored light around the button, a halo that blooms brighter the moment your cursor arrives. It is the same pattern you see on AI product launches and gaming sites, where the glow says this is the action that matters.

In this guide you will build a proper glow button in Tailwind CSS from scratch: a solid base, the neon halo, hover intensification with a physical lift, brand color matching, and an optional pulse for launch moments. Every step has copy-paste code, and the finished button matches the live element in our gallery exactly.

Step 1: Start with a solid, honest button

Every glow button is a good button first. Before any light effects, build the base: px-6 py-3 padding, rounded-xl corners, a solid brand background, semibold white text. If this base looks wrong on its own, no glow will save it.

<button class="px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-sm">
  Get started
</button>

This matters more than it sounds. The glow is decoration, and decoration on top of a weak base just makes a weak button louder. Get the padding, radius, and type right here, then add light in the next step.

Step 2: Add the halo with an arbitrary box-shadow

The glow is a single box-shadow with zero offsets and a large blur. In Tailwind that means an arbitrary value, because the built-in shadows like shadow-lg are neutral gray and fixed in size. You need exact blur and exact color, so you write it yourself:

<button class="px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-sm shadow-[0_0_20px_rgba(99,102,241,0.5)]">
  Get started
</button>

Read the shadow value left to right: 0 0 are the horizontal and vertical offsets, both zero, so the shadow spreads evenly in every direction instead of dropping below the button. 20px is the blur radius, which softens the shadow into a halo. rgba(99,102,241,0.5) is indigo at half opacity, the same hue as bg-indigo-600. Matching the glow color to the background color is what makes it read as light coming off the button rather than a random colored smudge.

Step 3: Make it bloom on hover and lift toward the cursor

A static halo is nice. A halo that reacts is irresistible. On hover, grow the blur from 20px to 32px, raise the opacity from 0.5 to 0.7, and lift the button 2px with hover:-translate-y-0.5. The light blooms exactly as the button rises toward the cursor, which reads as physical, like the button is leaning into the click.

<button class="px-6 py-3 rounded-xl bg-indigo-600 text-white font-semibold text-sm shadow-[0_0_20px_rgba(99,102,241,0.5)] hover:shadow-[0_0_32px_rgba(99,102,241,0.7)] hover:-translate-y-0.5 transition-all duration-200">
  Get started
</button>

Two details carry this step. First, transition-all duration-200 keeps the shadow growth and the lift synchronized in one smooth motion. Without it, the glow snaps between states and the whole thing feels broken. Second, 200 milliseconds is the sweet spot. Much longer and the button feels laggy; much shorter and the bloom is over before the eye registers it.

Step 4: Match the glow to your brand color

The indigo above is just an example. To make the glow yours, swap the rgb triplet inside both shadow classes to your brand color, keeping the same numbers as the button background. Here is the exact same button in emerald:

<button class="px-6 py-3 rounded-xl bg-emerald-600 text-white font-semibold text-sm shadow-[0_0_20px_rgba(16,185,129,0.5)] hover:shadow-[0_0_32px_rgba(16,185,129,0.7)] hover:-translate-y-0.5 transition-all duration-200">
  Get started
</button>

Keep the alpha around 0.5 at rest and 0.7 on hover regardless of hue. And build a glow scale for your site, then stick to it: 12px blur for quiet secondary actions, 20px for the primary call to action, 32px or more only for hero moments. One glowing button per section is the maximum. When everything glows, nothing does, and the page starts looking electric in the wrong way.

One more honest note about backgrounds. A glow is light cast onto darkness, so it always reads stronger on dark surfaces. On a light layout the same halo washes out. If your page is light, use a darker and more saturated glow color, or raise the blur and opacity until the halo shows up. Test it on a real phone at half brightness too. Halos that look perfect on a bright monitor have a habit of disappearing outdoors.

Step 5: Add a pulse for launch moments (optional)

For a launch day or a limited offer, a slow pulse draws the eye without needing a hover. The quick version is Tailwind's animate-pulse on the button, but know what it does: it fades the entire button, glow included, on a loop. That is fine for a CTA, but if you want only the light to breathe, animate the box-shadow itself:

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.5); }
  50% { box-shadow: 0 0 32px rgba(99,102,241,0.8); }
}

.pulsing-glow {
  animation: glow-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pulsing-glow { animation: none; }
}

Give your keyframes a unique name like glow-pulse. A generic name such as pulse can collide with Tailwind's own keyframes and silently break either animation. Keep the loop slow, around two to two and a half seconds, so it feels alive instead of alarming. And respect prefers-reduced-motion: for users who ask for less motion, the static glow is the whole experience, and that is enough.

Accessibility checklist

The glow is pure decoration, so it must never be the only thing carrying meaning. Four things to check before you ship:

• Contrast comes from the solid background. White text on bg-indigo-600 passes contrast on its own. Verify it again if you change the background color, because the glow contributes nothing to readability.
• Keep a visible keyboard focus ring. The hover bloom does nothing for keyboard users. A focus-visible:ring-2 focus-visible:ring-offset-2 on the button covers them.
• Survive forced-colors mode. In Windows High Contrast Mode and other forced-colors settings, box-shadows are stripped out. Your hero CTA must still look primary from its background, size, and placement alone, with the glow as decoration on top.
• Do not pulse for everyone. The prefers-reduced-motion guard in Step 5 is not optional polish. Motion-sensitive users get the static glow, which is the complete design.

Mistakes to avoid

1. Glowing every button on the page. Reserve the halo for the single primary action per section. Secondary actions stay flat and muted, which is exactly what makes the glowing one feel important.
2. Using shadow-lg and calling it a glow. The built-in shadows are neutral, offset downward, and the wrong shape. A glow needs zero offsets, a large blur, and your brand color. There is no shortcut class for that, which is why the arbitrary value exists.
3. Forgetting the transition. Without transition-all, the shadow jumps between its resting and hover values instantly. The bloom is the whole point of the hover state, and it needs those 200 milliseconds.
4. Shipping the light-background version untested. The same values that glow beautifully on dark charcoal can vanish on white. Darken and saturate the glow color for light layouts, and check it on a phone screen, not just your monitor.
5. Slowing the lift down. A 500 millisecond ease on the hover lift makes the button float like it is moving through water. Users read slow motion on a button as lag. Keep it at 200 milliseconds.

Frequently asked questions

How do I make a glow button in Tailwind CSS?

Use arbitrary box-shadow values: shadow-[0_0_20px_rgba(99,102,241,0.5)]. The zero offsets spread the shadow evenly into a halo, the 20px blur softens it, and the rgba color ties it to your brand. Intensify it on hover with hover:shadow-[0_0_32px_rgba(99,102,241,0.7)] and add hover:-translate-y-0.5 for the lift.

How do I change the glow color to match my brand?

Swap the rgb triplet inside the shadow class to your brand color, using the same numbers as the button background. Keep the alpha around 0.5 at rest and 0.7 on hover, and update both the resting and hover shadow classes so the glow stays consistent.

Why does my glow button look weak on a light background?

A glow is light cast onto darkness, so it always reads stronger on dark backgrounds. On light layouts, use a darker and more saturated glow color, or raise the blur and opacity until the halo shows up. Test on a real phone, since halos that look fine on a monitor often vanish on mobile screens.

Can I animate the glow on a button?

Yes. Tailwind's animate-pulse fades the whole button, glow included, on a loop. For a glow-only pulse, write keyframes that animate box-shadow between two blur values, give them a unique name like glow-pulse, and wrap it in a prefers-reduced-motion guard.

Is a glow button accessible?

The glow itself is decorative, so text contrast must come from the solid button background alone. Keep a visible keyboard focus ring, since the hover glow does nothing for keyboard users, and make sure the button hierarchy survives in forced-colors mode where box-shadows are removed.

How is this different from the glow ring hover effect?

The button hover effects roundup covers a brief glow ring as one of ten effects. This guide builds the full neon halo button step by step: exact shadow values, hover bloom with lift, brand color matching, dark background tuning, and a pulse variant.