CSS Introduction | CSS3 Modules | CSS3 Shadow Effects

CSS3 Shadow Effects

In CSS3, you can easily apply shadow effects to text or HTML elements.

The shadow properties available in CSS3 are as follows.

1. text-shadow
2. box-shadow

CSS3 Shadow Effect Support Versions

The major web browser versions that support CSS3 shadow effects are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

text-shadow Property

The text-shadow property easily applies a shadow effect to the text.

The syntax of the text-shadow property is as follows.

Syntax

text-shadow: shadow-x-value shadow-y-value blur-value color-value;

Specify the relative x-axis and y-axis positions where the shadow begins, and specify the blur value that indicates how blurred the shadow is.

The following example shows various shadow effects that can be applied to text in CSS3.

<style>
    #shadow_01 { text-shadow: 2px 2px; }
    #shadow_02 { text-shadow: 2px 2px orange; }
    #shadow_03 { text-shadow: 2px 2px 5px; }
    #shadow_04 { text-shadow: 0 0 3px red; }
    #shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }
</style>

box-shadow Property

The box-shadow property easily applies a shadow effect to an HTML element.

The syntax of the box-shadow property is the same as the syntax used by the text-shadow property.

Syntax

box-shadow: shadow-x-value shadow-y-value blur-value color-value;

Specify the relative x-axis and y-axis positions where the shadow begins, and specify the blur value that indicates how blurred the shadow is.

The following example shows various shadow effects that can be applied to HTML elements in CSS3.

<style>
    #shadow_01 { box-shadow: 5px 5px; }
    #shadow_02 { box-shadow: 5px 5px orange; }
    #shadow_03 { box-shadow: 5px 5px 10px; }
    #shadow_04 { box-shadow: 0 0 15px red; }
    #shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }
</style>