CSS Shadows
The CSS shadow effect property is used in HTML documents to add shadow to text and images. The box-shadow CSS property adds shadow effects around the frame of an element. Multiple effects can be set, separated by commas. A box shadow is defined by the element's X and Y offsets, blur and spread radius, and color.
The box-shadow property allows you to cast a drop shadow from almost any element's frame. When a border-radius is specified on an element with a box shadow, the box shadow has the same rounded corners as the element. Multiple box shadows have the same z-order as multiple text shadows (the first specified shadow is on top).
Text Shadow:
To display shadowed text, use the CSS text-shadow property. This property holds the pixel length, breadth, and width of the shadow, as well as its color.
TextBox Shadow:
The shadow property makes the text box cast a shadow. This property holds the pixel length, breadth, and width of the shadow, as well as its color.
Specify a single box-shadow using:
- A <length> value of two, three, or four.
- If only two values are provided, they are interpreted as <offset-x> and <offset-y>.
- A third value is interpreted as a <blur-radius> if provided.
- A fourth value is interpreted as a <spread-radius> if provided.
- The inset keyword is optional.
- A <color> value is optional.
1. inset
If no shadow is specified (the default), a drop shadow is assumed (as if the box were raised above the content). The presence of the inset keyword causes the shadow to be centered within the frame (as if the content was debossed inside the box). Inset shadows are drawn within the border (even if it is transparent), above the background but below the content.
2. <offset-x> <offset-y>
To set the shadow offset, use these two <length> values. The horizontal distance is specified by <offset-x>. Negative values move the shadow to the element's left. The vertical distance is specified by <offset-y>. When the value is negative, the shadow is placed above the element. Possible units are listed in <length>. If both values are 0, the shadow is placed behind the element (and may produce a blur effect if the <blur-radius> and/or <spread-radius> properties are set).
3. <blur-radius>
This is the <length> value. The greater this value, the greater the blur, and thus the shadow becomes larger and lighter. Negative values are not permitted. If not specified, it will be 0 (the edge of the shadow is sharp). The specification does not include an exact algorithm for calculating the blur radius, but it does elaborate as follows:
4. <spread-radius>
This is the fourth value of length>. Positive values cause the shadow to expand and grow larger, while negative values cause the shadow to contract. It will be 0 if not specified (the shadow will be the same size as the element).
5. <color>
Possible keywords and notations can be found in the color> values. It defaults to current color if not specified.