{"id":2179,"date":"2017-01-16T03:16:11","date_gmt":"2017-01-16T03:16:11","guid":{"rendered":"http:\/\/cssreset.com\/?p=2179"},"modified":"2017-01-11T03:21:15","modified_gmt":"2017-01-11T03:21:15","slug":"create-a-burning-text-effect-with-css3","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-a-burning-text-effect-with-css3\/","title":{"rendered":"Create a Burning Text Effect With CSS3"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\nspan.s1 {font-kerning: none}\nspan.s2 {text-decoration: underline ; font-kerning: none}\nspan.Apple-tab-span {white-space:pre}\n--><\/style>\n<p>As you may already know, CSS is a great tool for creating <a href=\"https:\/\/cssdeck.com\/blog\/\/create-an-anaglyphic-text-effect-using-css\/\" target=\"_blank\">cool text effects<\/a>\u00a0without 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\u2019s a super easy effect to accomplish \u2014 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\u2019t forget to make the color of the text white, so it looks like it\u2019s white hot! See the code below:<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #cc00cc\">#fire-text<\/span> <span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">font-family<\/span><span style=\"color: #00AA00\">:<\/span> \u201cOpen Sans\u201d<span style=\"color: #00AA00\">,<\/span> <span style=\"color: #993333\">sans-serif<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">color<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc00cc\">#f5f5f5<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">text-shadow<\/span><span style=\"color: #00AA00\">:<\/span>\u00a0<span style=\"color: #933\">0px<\/span> <span style=\"color: #933\">-2px<\/span> <span style=\"color: #933\">4px<\/span> <span style=\"color: #cc00cc\">#fff<\/span><span style=\"color: #00AA00\">,<\/span>\u00a0<span style=\"color: #933\">0px<\/span> <span style=\"color: #933\">-2px<\/span> <span style=\"color: #933\">10px<\/span> <span style=\"color: #cc00cc\">#FF3<\/span><span style=\"color: #00AA00\">,<\/span>\u00a0<span style=\"color: #933\">0px<\/span> <span style=\"color: #933\">-10px<\/span> <span style=\"color: #933\">20px<\/span> \u00a0 \u00a0 \u00a0 \u00a0 <span style=\"color: #cc00cc\">#F90<\/span><span style=\"color: #00AA00\">,<\/span>\u00a0<span style=\"color: #933\">0px<\/span> <span style=\"color: #933\">-20px<\/span> <span style=\"color: #933\">40px<\/span> <span style=\"color: #cc00cc\">#C33<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">font-size<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #933\">100px<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><a href=\"https:\/\/cssdeck.com\/blog\/\/create-an-anaglyphic-text-effect-using-css\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2180\" alt=\"Screen Shot 2017-01-11 at 1.22.44 PM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.22.44-PM-1024x274.png\" width=\"1024\" height=\"274\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.22.44-PM-1024x274.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.22.44-PM-300x80.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.22.44-PM-180x48.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-11-at-1.22.44-PM.png 1156w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>As you may already know, CSS is a great tool for creating cool text effects\u00a0without 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 [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/create-a-burning-text-effect-with-css3\/\" title=\"Click to read 'Create a Burning Text Effect With CSS3'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2179"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2179"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2179\/revisions"}],"predecessor-version":[{"id":2181,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2179\/revisions\/2181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2180"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}