CSS Burning Text Effect

Here’s a fun little CSS snippet that allows you to create text that looks like it’s on FIRE. It’s achieved using text-shadow and is a super easy effect to add to any of your projects.

First you’ll need some HTML:

Join us in our newest publication:
<div id=“fire">FIRE</div>

That’s the easy part. Now for the CSS. Here’s what your styling should look like to achieve the cool fire effect.

body {
 background-color:#222;
 text-align:center;
 font-family: "Open Sans";
}
#fire {
 color: #f5f5f5;
 text-shadow:
 0px -2px 4px #fff,
 0px -2px 10px #FF3,
 0px -10px 20px #F90,
 0px -20px 40px #C33;
 font-size: 100px;
}

Share and Enjoy !

0Shares
0 0