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:

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

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More
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