Border Glow Generator

Design glowing borders for cards and buttons — neon halos, gradient edges, or an animated rotating aurora border with a soft bloom. Tune blur, reach, intensity and speed live on a dark or light stage, then export clean CSS (with a reduced-motion guard) or Tailwind.

Preview

Glows read best on a dark surface — flip the stage to compare.

A glowing border that makes any card feel alive.

Stage

Glow

Style

Glow color

#34d399

Surface

Glow blur24px

Glow reach4px

Intensity70%

Border width2px

Radius16px

Animation

Export

Drop the class on any element. Animations honor prefers-reduced-motion.

.glow-border {
  position: relative;
  z-index: 0;
  border-radius: 16px;
  border: 2px solid #34d399;
  background: #0b0f0e;
}

.glow-border::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: #34d399;
  filter: blur(24px);
  opacity: 0.70;
}