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