CSS Text Glow Effect

We know the css ‘text-shadow’ property. Now you can use text shadow property to make glow effect. See the below code.

CSS:

.text
{
text-shadow: 0 0 10px #c61a1a;
font-size:50px;
color:#c61a1a;
}

HTML:

<div class="text">
Text Shadow
</div>

The result looks like this:

css text glow effect

VN:F [1.9.22_1171]
Rating: 7.9/10 (56 votes cast)
VN:F [1.9.22_1171]
Rating: +14 (from 14 votes)
CSS Text Glow Effect, 7.9 out of 10 based on 56 ratings

This entry was posted in Advanced HTML - CSS. Bookmark the permalink.

4 Responses to CSS Text Glow Effect

  1. This is a wonderful tutorial, I have always wanted to know what such things meant. The color coded template is a good way to learn Blogger Template customizing. Thanks for the great service. Cheers,

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: +4 (from 8 votes)
  2. Excellent tutorial, I’ve learned a lot from this site! Thanks a lot!

    VA:F [1.9.22_1171]
    Rating: 4.3/5 (3 votes cast)
    VA:F [1.9.22_1171]
    Rating: +4 (from 8 votes)
  3. gio says:

    This is a picture…What about ie???

    VA:F [1.9.22_1171]
    Rating: 2.0/5 (2 votes cast)
    VA:F [1.9.22_1171]
    Rating: -2 (from 8 votes)
    • admin says:

      Sorry to say you that CSS Text Glow Effect won’t work in IE. There are some CSS hacks for IE. You use that but it is not so smooth and beautiful.

      VN:F [1.9.22_1171]
      Rating: 4.0/5 (2 votes cast)
      VN:F [1.9.22_1171]
      Rating: +1 (from 5 votes)

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>