CSS Shadow

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:

Default valuenone
InheritedYes
Animationyes
Applies toall elements
VersionCSS3

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;
p{
    text-shadow: 2px 2px;
    font-size: 20px;
}

Output:

This paragraph has shadow property.

ii).Text shadow with different color

Syntax:

text-shadow: offset-x offset-y color;
p{
    text-shadow: 2px 2px blue;
    font-size: 20px;
}

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;
p{
    text-shadow: 2px 2px 5px blue;
    font-size: 20px;
}

CSS

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
p{
    text-shadow: 2px 2px 5px blue, 4px 4px 5px red, 6px 6px 5px #006699;
    font-size: 20px;
}

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.

div{
    box-shadow: 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Creating CSS box-shadow with blur effect.

div{
    box-shadow: 10px 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Follow Us On