My Profile Photo

Rich Werden


A simple site for Rich to write about code and archive some completed projects for future reference...


CSS Text on Fire

While the site CSSNewbie.com doesn’t always have the best executions, I am enamored with this particular text-effect. By using different offset drop shadows1, the text is made to look like it is en fuego and it works pretty well as a visual trick…

End result:

Setting things ON FIRE everywhere you go....

How-To:

Make some element and give it a class="fire" to apply it…

body {
  background-color:#0d0d0d; /* something dark */
  text-align:center;
}

.fire {
  font-size: 4rem; /* large enough to see the effect */
  color: #f5f5f5;
  text-shadow:
  0px -2px 4px #fff,
  0px -2px 10px #FF3,
  0px -10px 20px #F90,
  0px -20px 40px #C33;

  /* particulars of my example */
  display: inline-block;
  vertical-align: middle;
}

  1. Ok, really, text-shadows obviously