CSS SHADOW EFFECT

CSS shadow property is used to create shadow effect for HTML elements and texts.

These are CSS shadow properties:

1. text-shadow
2. box-shadow

1).CSS text shadow

The text-shadow property is used to apply shadow to the text.

Using text-shadow property you can add horizontal or vertical shadow with different color and blur radius.

This table summarizes use and properties of text-shadow:

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;

Output:

This paragraph has shadow property.

ii).Text shadow with different color

Syntax:

text-shadow: offset-x offset-y color;

Output:

This paragraph has blue shadow.

iii).Text shadow with different color and blur-radius

Syntax:

text-shadow: offset-x offset-y blur-radius color;

Output:

This paragraph has blue shadow with blur-radius 5px.

iv).Multiple shadow

Syntax:

text-shadow: shadow1,shadow2,shadow3...;
#Where shadow = offset-x offset-y blur-radius color

Output:

This paragraph has blue shadow with blur-radius 5px.

2).CSS box shadow

The box-shadow property is used to create shadow for elements.

CSS have the same property values for box-shadow as in text-shadow.

Output:

Creating CSS box-shadow with blur effect.

Output: