CSS Shadow

CSS Shadow is used to define shadow around the HTML elements; To define shadow need to specify the amount of depth in length unit with shadow color.

CSS shadow makes appearance and clarity of web page content very impressive. In this CSS shadow tutorial, you can learn how to create a unique shadow, and what is techniques will make it simple to create the desired shadow.

CSS Shadow concept

How to generate the shadow around the HTML element; let's discuss first we need to define two important things i.e. depth and color of the shadow. You can see the example syntax, it mentioned below:

shadow: depth color;

Shadow Depth

Shadow depth specifies the sides i.e. Top, Right, Bottom, and Left. How much depth you want to appear.? The depth value can be defined in any length units in a clockwise direction starting from the top.

Shadow Depth Conditions

There are three possible conditions for shadow depth value:

• Four Values like: top(3px) right(7px) bottom(2px) left(1px);
• Two Values like: top-bottom(5px) right-left(3px);
• One Value like: top-bottom-right-left(5px) for all;

Condition: With Four Values

Just set the four values at a time which will define the depth for top, right, bottom, left side.

For Example:

shadow: 3px 7px 2px 1px blue;

Condition: With Two Values

In this situation, just pass only two values at a time which will define the depth; first value defines the depth for (top & bottom), and the second value defines the depth for (left & right) side.

For Example:

shadow: 5px 3px blue;

Condition: With One Values

In this situation, just providing a single value for depth, it will work for all co-ordinates in the same value of the depth for top, right, bottom, and left.

For Example:

shadow: 5px blue;

Where To Use Shadow?

The shadow can be defined in many conditions BUT there are two major scenarios that are mostly used in the HTML web page.

• box-shadow
• text-shadow

Box Shadow Property

The box-shadow is used to define shadow around HTML block-level elements like div, p, ul, span, etc. It creates a shadow around the element with the width and height:

Example: With Four Values

.div_a {
   width: 382px;
   height: 197px;
   background-color: #41cd21;
   box-shadow: 20px 10px 5px 2px #434525;
}
Example with code →

Example: With Two Values

If you want to set the same shadow look from top & bottom side and another equal look from the right & left side then you need to pass only two values:

#div_b {
   width: 238px;
   height: 344px;
   background-color: #433540;
   box-shadow: 20px 20px #555344;
}
Example with code →

Text Shadow Property

The text-shadow property is used to specify shadow in HTML text content. In this kind of shadow, The shadow works for each and every text in the whole text-content uniquely in this kind of shadow property. The text-shadow rule is the same as the box-shadow.

Example: Text Shadow

h3 {
   color: white;
   text-shadow: 2px 2px 4px #000000;;
}
Example with code →

Example: With Multiple Text Shadow

Just add multiple text-shadow values separated with a comma (,):

h3 {
   color: white;
   text-shadow: 2px 2px 4px #000000, 0 0 25px blue, 0 0 5px darkblue;
}
Example with code →