Shadows and neon effects on text in HTML

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:



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



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:



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

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:



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



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

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:



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



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:



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



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



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



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:



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

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:



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



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:



Then the neon effect looks like this:



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:



Then the neon effect looks like this:



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.