CSS Burning Text Effect

Published January 28, 2017 by CSS Newbies.

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.

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>