Shadows and neon effects on text in HTML




Basic text shadows

For the newer browsers, being able to use the type of stylesheets called CSS3, there is an effect called 'text-shadow', that can be used for shadow effects on texts and objects. Objects are shown on another page, as there is so many effects you can do with text-shadow, they need to be adressed separately.

Text-shadow consists of two parts: a specification of the displacement, i.e. the length of the shadow, and the color. The displacement is defined left/right and up/down, so you can choose where the "light" comes from.

Shadow effects equivalent to the light coming from the upper left corner, requires a "pull" in two directions. For simple shadow effect using a dark grey shadow, the code looks like this:

Here the text is normal, <SPAN STYLE="text-shadow: 0.15em 0.15em #2F4F4F">here there is a shadow, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.


Therefore, if you want to make a purple shadow, and simulate that the light is from a source right below the text, it looks like this:

Here the text is normal, <SPAN STYLE="text-shadow: 0em -0.25em #9400D3">here there is a shadow, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.





Blurry text shadow

Instead of the sharp edged text shadow, you can make a blurry shadow, by adding a third value for how far you want to stretch the shadow.

If we look at our grey shadow from before, and give it an additional value, the code looks like this:

Here the text is normal, <SPAN STYLE="text-shadow: 0.15em 0.15em 0.1em #2F4F4F">here there is a blurry shadow, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here there is a blurry shadow, if the browser support CSS3, and here the text return to normal.


The bigger the third value, the more blurry the shadow becomes.






Multiple shadows on an object

It is possibel to have multiple shadows at the same time. This is done by specifying multiple sets of shadows, separated by comma.

If we try adding three shadows in blue, green and red, the code looks like this:

<SPAN STYLE="text-shadow: 0.2em 1.1em 0.1em blue, -0.8em 0.1em 0.1em green, 0.9em -0.9em 0.1em red">Text with three shadows.</SPAN>


On the page, when shown, it looks like this:

Text with three shadows.


Offhand, it may look at bit odd having multiple shadows at the same time, but by combining a light and dark shadow (not blurry), you can get a rather good contrast effect, in case text and background have similar colors, thus manking it hard to read, e.g. two gray nuances:

Here the text is normal, <SPAN STYLE="text-shadow: -1px -1px white, 1px 1px black">here the shadows give contrast, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here the shadows give contrast, if the browser support CSS3, and here the text return to normal.


If you apply four shadows (not blurry), instead of contrast you get a lineout of the characters:

Here the text is normal, <SPAN STYLE="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black">here there is an outline on the characters, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.


If you do this, there can be an advantage in giving the characters a little extra space by using letter-spacing. If we look at the text from before, and set letter-spacing to 1px, the code becomes:

Here the text is normal, <SPAN STYLE="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; letter-spacing:1px">here there is an outline on the characters, if the browser support CSS3,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.



Neon effects

Like the outline, you can make a neon effect, i.e. a blurry outline. This is simply done by having a blurry shadow, as described above, but without a displacement in the x-y plane. The the code looks like this:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red">Red text with a single red shadow.</SPAN>


On the page, when shown, it looks like this:

Red text with a single red shadow.


If you think the neon effect isn't strong enough, you can apply it several times. Here we try with two times, then the code looks like this:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red">Red text with two times red shadow.</SPAN>


Then the neon effect looks like this:

Red text with two times red shadow.


The colors can of course be combined and given different size, so you get a bit of color change, e.g. the two times red shadow, here given a bit of yellow right around the characters. The code is:

<SPAN STYLE="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red, 0em 0em 0.2em yellow">Red text with two times red + a yellow shadow.</SPAN>


Then the neon effect looks like this:

Red text with two times red + a yellow shadow.


Effects like this don't work really well on smaller fonts like the ones used for main text, but for font sizes used for headlines, you can get some useful effects, it is only a matter of trying out some ideas.