CSS3 Shadow Effects
With CSS3, you can add shadow to text, and to elements, using one of two properties: text-shadow, or box-shadow. This webpage demonstrates the text-shadow property.
The CSS3 text-shadow property applies shadow to text. In its simplest stylesheet form {text-shadow: 2px 2px;}, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
Now change the style to {text-shadow: 2px 2px red;}, which adds the red color to the shadow:
Add a blur effect to the shadow by changing the style to {text-shadow: 2px 2px 5px red;}, with the blur value before the color value:
This style {color: white;text-shadow: 2px 2px 4px #000000;} shows a white text with black shadow:
Create a red neon glow shadow with the style of {text-shadow: 0 0 3px #FF0000;}:
Note: The style used to create the shadow effects on the top heading was {text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue; color: white; font-size: 30px;}.
