CSS text shadow effects

❦ First Published on

I’m experimenting with CSS text shadow effects for the overlay labels of my livestream. I have also tried animating them but the overlay animation performance is slow so they remain still for now.

You may want to turn down the lights in this site if you have the lights on.

Neon Glow 

/* Neon Glow 〰〰〰 */
h2 {
  padding: 60px;
  background: transparent;
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 11px #fff,
    0 0 23px #fff,
    0 0 43px #00ffbb,
    0 0 83px #00ffbb,
    0 0 89px #00ffbb,
    0 0 101px #00ffbb,
    0 0 151px #00ffbb;
  }

Delicate Shine


/* Delicate Shine 〰 */
h2 {
  padding: 60px;
  font-weight: normal;
  letter-spacing: 1px;
  background: transparent;
  color: #fff;
  text-shadow: 
    0 0 1px #e9e9dd,
    0 0 3px #ff80ab,
    0 0 6px #fff;
  }

Fire Power


/* Fire Power ⽕ */
h2 {
  padding: 60px;
  background: transparent;
  color: #fff;
  text-shadow: 
    0 -1px 4px #fff, 
    0 -2px 10px #ff0, 
    0 -10px 20px #ff8000, 
    0 -18px 40px  #f00, 
    2px 2px 3px rgba(233,101,62,0);
  }

Blue Flame


/* Blue Flame 🜂 */
h2 {
  padding: 60px;
  background: transparent;
  color: #fff;
  text-shadow: 
    0 -1px 4px #00ffbb, 
    0 -2px 10px #18ffff, 
    0 -10px 20px #00e5ff, 
    0 -18px 40px #00ffbb;
  }

Toned Down


/* Toned Down ~ */
h2 {
  padding: 60px;
  background: transparent;
  color: #fff;
  color: #ddd;
  text-shadow: 
    -1px -1px 1px rgba(255,255,255,.1), 
    1px 1px 1px rgba(0,0,0,.5);
  }

More will be added in time, and in the meantime come by to see them live at https://www.twitch.tv/hypertexthero!


· ˖ ✦ . ˳

Possibly Related:

˳ · ˖

Prior entry:
Next entry: