tutorialstonight logo
A Platform To Learn To Code

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:

Default value none
Inherited Yes
Animation yes
Applies to all elements
Version CSS3

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;

Example

Run the code

Output:

This paragraph has shadow property.


ii).Text shadow with different color

Syntax:

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

Example

Run the code

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;

Example

Run the code

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

Example

Run the code

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.

Example

Run the code

Output:

This is a div element.

Creating CSS box-shadow with blur effect.

Example

Run the code

Output:

This is a div element.