{"id":1972,"date":"2016-07-05T14:04:46","date_gmt":"2016-07-05T14:04:46","guid":{"rendered":"http:\/\/cssreset.com\/?p=1972"},"modified":"2016-07-05T14:04:46","modified_gmt":"2016-07-05T14:04:46","slug":"create-glowing-neon-text-using-css3","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-glowing-neon-text-using-css3\/","title":{"rendered":"Create Glowing Neon Text Using CSS3"},"content":{"rendered":"

CSS3’s text-shadow property is extremely useful in creating many different text effects, the coolest of which is probably an effect that makes the text look like it’s glowing. When combined with some bright colors applied to the text shadow, the glow effect becomes a nifty\u00a0neon<\/em> glow effect. Check out the code below:<\/p>\n

\"Screen<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. h1{<\/span><\/div><\/li>\n
  2. font-size<\/span>:<\/span> 60px<\/span>;<\/span><\/div><\/li>\n
  3. font-family<\/span>:<\/span> 'Futura'<\/span>;<\/span><\/div><\/li>\n
  4. color<\/span>:<\/span> #fff<\/span>;<\/span><\/div><\/li>\n
  5. text-shadow<\/span>:<\/span> 0<\/span> 0<\/span> 5px<\/span> #fff<\/span>,<\/span> 0<\/span> 0<\/span> 10px<\/span> #fff<\/span>,<\/span> 0<\/span> 0<\/span> 20px<\/span> #ff0080<\/span>,<\/span> 0<\/span> 0<\/span> 30px<\/span> #ff0080<\/span>,<\/span> 0<\/span> 0<\/span> 40px<\/span> #ff0080<\/span>,<\/span> 0<\/span> 0<\/span> 55px<\/span> #ff0080<\/span>,<\/span> 0<\/span> 0<\/span> 75px<\/span> #ff0080<\/span>;<\/span><\/div><\/li>\n
  6. text-align<\/span>:<\/span> center<\/span>;<\/span><\/div><\/li>\n
  7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Play around with the colors and blur-radiuses to customize the effect for your own projects.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    CSS3’s text-shadow property is extremely useful in creating many different text effects, the coolest of which is probably an effect that makes the text look like it’s glowing. When combined with some bright colors applied to the text shadow, the […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1973,"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\/1972"}],"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=1972"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":1974,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1972\/revisions\/1974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1973"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}