How to Create a Text Glow Effect Using CSS3

December 04, 2013 | 1 Minute Read

I've often found myself in a position where I want to add a simple text glow effect to some text when hovering over a link. Before CSS3 the only way this was possible was to use some sort of image replacement technique or something.

Well, now it can all be done with the CSS text-shadow property. Here’s how to create a text glow effect using CSS3.

The Code:

h1:hover {
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

Demo:

Hover Over Me

Browser Support

ie10 and above Chrome 29 and above Fire Fox 24 and above Safari 5.1 and above

The text-shadow property has good browser support working in all modern browsers. Not supported in Internet Explorer 9 and below.


Sources