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.

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!

Prior entry:
Next entry: