Neon Glow Text

Create stunning neon glow effects with pulsating text shadows, customizable colors, and animation speed in your React components.

Overview

The NeonGlowText component simulates a neon sign effect with vibrant, pulsating text shadows. This component brings an eye-catching glow effect to your text, ideal for headers, buttons, or any attention-grabbing UI element.

It allows for easy customization of text color, glow color, animation duration, blur radius, and spread radius.

Preview

Neon Glow

Usage

'use client'
 
import { NeonGlowText } from '@/components/text/neon-glow-text'
 
<NeonGlowText text="Neon Glow" />

Code

'use client'
 
import { useState } from 'react'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface NeonGlowTextProps {
  text: string
  glowColor?: string
  duration?: number
  blurRadius?: number
  spreadRadius?: number
  className?: string
  as?: React.ElementType
}
 
export function NeonGlowText({
  text,
  glowColor = '#ff00de',
  duration = 1,
  blurRadius = 5,
  spreadRadius = 2,
  className,
  as: Component = 'div',
}: NeonGlowTextProps) {
  const MotionComponent = motion.create(Component)
 
  const [isHovered, setIsHovered] = useState<boolean>(false)
 
  const textShadow = [
    `0 0 ${blurRadius}px #fff, 0 0 ${blurRadius * 2}px #fff, 0 0 ${blurRadius * 3}px #fff, 0 0 ${blurRadius * 4}px ${glowColor}, 0 0 ${blurRadius * 7}px ${glowColor}, 0 0 ${blurRadius * 8}px ${glowColor}, 0 0 ${blurRadius * 10}px ${glowColor}, 0 0 ${blurRadius * 15}px ${glowColor}`,
    `0 0 ${spreadRadius}px #fff, 0 0 ${spreadRadius + 3}px #fff, 0 0 ${spreadRadius + 5}px #fff, 0 0 ${spreadRadius + 8}px ${glowColor}, 0 0 ${spreadRadius + 12}px ${glowColor}, 0 0 ${spreadRadius + 18}px ${glowColor}, 0 0 ${spreadRadius + 23}px ${glowColor}, 0 0 ${spreadRadius + 35}px ${glowColor}`,
  ]
 
  const hoverTextShadow = `0 0 ${blurRadius * 1.5}px #fff, 0 0 ${blurRadius * 2}px #fff, 0 0 ${blurRadius * 3}px #fff, 0 0 ${blurRadius * 5}px ${glowColor}, 0 0 ${blurRadius * 7}px ${glowColor}`
 
  return (
    <MotionComponent
      className={cn(
        'text-4xl font-bold text-gray-500 will-change-[text-shadow]',
        className
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      animate={{
        scale: isHovered ? 1.1 : 1,
        textShadow: isHovered ? hoverTextShadow : textShadow,
      }}
      transition={{
        duration,
        repeat: Number.POSITIVE_INFINITY,
        repeatType: 'reverse',
      }}
    >
      {text}
    </MotionComponent>
  )
}

Examples

glowColor

The glowColor is used to glow effect of the text.

Glow Color

duration

The duration is used to the duration of the animation.

Glowing Fast

blurRadius

The blurRadius is used to the blur radius of the text shadow.

Soft Glow

spreadRadius

The spreadRadius is used the spread radius of the text shadow.

Wide Glow

className

The className is use to apply additional Tailwind CSS classes, such as setting colors, padding, etc.

Custom Glow Color

Props

Prop	Type	Default
`text`	`string`	-
`glowColor`	`string`	`"#ff00de"`
`duration`	`number`	`1`
`blurRadius`	`number`	`5`
`spreadRadius`	`number`	`2`
`className`	`string`	-
`as`	`ElementType<any, keyof IntrinsicElements>`	`"div"`

On this page