UI Recipe

Neon Glow

CSS glow effects using text-shadow and box-shadow with multiple layered blur values to create a neon tube look.

Text Glow

NEON

CYAN

PINK

Three text-shadow layers at increasing blur radius create the neon tube effect.

.glow-text {
  text-shadow:
    0 0 10px #b06dff,
    0 0 30px #b06dff,
    0 0 60px #b06dff;
}

Box Glow

GLOW

CYAN

PINK

.glow-box {
  background: rgba(176, 109, 255, 0.08);
  border: 2px solid #b06dff;
  box-shadow:
    0 0 15px #b06dff,
    0 0 45px rgba(176, 109, 255, 0.3);
}

Animated Glow

A @keyframes pulse animation on opacity creates a breathing neon effect.

PULSE

@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.glow-text.animate {
  animation: glowPulse 2s ease-in-out infinite;
}