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 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....


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

body {
  background-color:#0d0d0d; /* something dark */

.fire {
  font-size: 4rem; /* large enough to see the effect */
  color: #f5f5f5;
  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