Create a Burning Text Effect With CSS3

As you may already know, CSS is a great tool for creating cool text effects without having to use a photo editing or illustrator software. This tutorial demonstrates how to create an effect that makes it appear as though the text is burning. It’s a super easy effect to accomplish — all you really need to do is employ the text-shadow property, and be sure you set a few different (and large) radiuses for the shadow. And don’t forget to make the color of the text white, so it looks like it’s white hot! See the code below:

  1. #fire-text {
  2. font-family: “Open Sans”, sans-serif;
  3. color: #f5f5f5;
  4. text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px         #F90, 0px -20px 40px #C33;
  5. font-size: 100px;
  6. }

Screen Shot 2017-01-11 at 1.22.44 PM

Join us in our newest publication:

Share and Enjoy !

0 0