CSS3 allows us to create stunning text effects through some of its brand new properties. One of the most interesting CSS3 properties is surely text-shadow. Thanks to this property, we can create a shadow around text. Its syntax is text-shadow: offset-x offset-y radius color, where offset-x is the horizontal offset of the shadow from text, offset-y its vertical offset, radius is the distance by which the blur of the shadow is calculated and color is the CSS color of the shadow. Let's say that we want to create a neon effect on text. For example, given the following markup:
<h1>Test</h1>
We can write the following CSS:
h1 {
width: 400px;
line-height: 4;
height: 2em;
background: #000;
color: #fff;
text-align: center;
font: 110px Impact, sans-serif;
text-transform: uppercase;
line-height: 2;
letter-spacing: 0.1em;
text-shadow: 0 0 100px yellow;
}
As you can see, we've reset the horizontal and vertical offsets of the text shadow and used only the radius value. The final effect varies from browser to browser. Here's how it looks in Chrome and Safari:
