Tạo bóng neon đỏ (red neon glow) cho văn bản với CSS

Hiệu ứng Neon Glow với text-shadow

Dùng nhiều lớp `text-shadow` với `blur-radius` lớn và cùng màu để tạo hiệu ứng **neon sáng lấp lánh**. Màu đỏ (#FF0000) là ví dụ kinh điển.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: white;
      text-shadow: 0 0 4px #FF0000;  /* Bóng đỏ blur 4px, không offset */
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Above heading has a red neon glow shadow effect.</p>
</body>
</html>

Neon Glow Chuyên Nghiệp (Nhiều lớp)

.neon-red {
  color: #fff;
  font-family: 'Monoton', cursive; /* Font neon phù hợp */
  font-size: 3rem;
  text-shadow: 
    0 0 2px #fff,           /* Core trắng nóng */
    0 0 5px #ff0000,        /* Đỏ gần */
    0 0 10px #ff0000,       /* Đỏ trung */
    0 0 20px #ff0000,       /* Đỏ xa */
    0 0 40px #ff0000,       /* Đỏ rất xa */
    0 0 80px #ff0000;       /* Halo đỏ */
  /* Animation nhấp nháy */
  animation: neonFlicker 1.5s ease-in-out infinite alternate;
}
@keyframes neonFlicker {
  0%, 100% { 
    text-shadow: 
      0 0 2px #fff, 0 0 5px #ff0000, 0 0 10px #ff0000, 
      0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 80px #ff0000;
    opacity: 1;
  }
  50% { 
    text-shadow: 
      0 0 1px #fff, 0 0 2px #ff0000, 0 0 5px #ff0000;
    opacity: 0.8;
  }
}

Các màu Neon phổ biến

Màu	Hex	RGB
Đỏ (Red)	#FF0000	rgb(255,0,0)
Xanh lam (Blue)	#00FFFF / #0080FF	rgb(0,255,255)
Xanh lá (Green)	#39FF14	rgb(57,255,20)
Tím (Purple)	#BC13FE	rgb(188,19,254)
Cam (Orange)	#FF8C00	rgb(255,140,0)
Hồng (Pink)	#FF10F0	rgb(255,16,240)

Neon Sign hoàn chỉnh (Có nền đen, tubing effect)

.neon-sign {
  background: #111;
  padding: 40px;
  text-align: center;
  font-family: 'Monoton', cursive;
}
.neon-text {
  color: #fff;
  text-shadow: 
    0 0 1px #fff,
    0 0 3px #fff,
    0 0 5px #00ffff,
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff,
    0 0 40px #00ffff;
  animation: flicker 2s infinite alternate;
}
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.4; }
}

Lưu ý

Neon cần **nền tối** (đen, xanh đậm) để hiệu ứng nổi bật.
Font chữ nét mỏng, cong vẹo (script, monospace) trông thực tế hơn.
Animation `flicker` (nhấp nháy) tăng tính thực tế.
Performance: Giới hạn < 6-8 shadow layers, tránh animate text-shadow trực tiếp trên text dài.