HTML CSS

GLOWING TEXT WITH PURE HTML CSS

(quick & simple examples)

BASIC TEXT GLOW

01

TEXT-SHADOW: X Y BLUR COLOR .glow { text-shadow: 0 0 10px #fff700; }

<p class="glow">GLOW!</p>

STACK MULTIPLE SHADOWS TO CREATE A STRONGER GLOW .stronk {    text-shadow:    0 0 5px #fff700, 0 0 10px #fff700,    0 0 20px #fff700, 0 0 40px #fff700; }

STRONGER TEXT GLOW

02

<p class="stronk">GLOW!</p>

@keyframes flash {   FROM RED   from {     text-shadow:     0 0 5px red, 0 0 10px red,     0 0 20px red, 0 0 40px red;   }

FLASHING NEON (A)

03

  TO BLUE   to {     text-shadow:     0 0 5px blue, 0 0 10px blue,     0 0 20px blue, 0 0 40px blue;   } }

FLASHING NEON (B)

04

ATTACH KEYFRAMES .fglow { animation: flash 0.2s ease infinite alternate; }

<h1 class="fglow">RED ALERT</h1>