In this article, we will learn about Text Shadow and Box Shadow in CSS.

Text Shadow

The Text Shadow(text-shadow) property in CSS is used to apply shadow to the text.

We can apply a number of shadows separated by commas to the text. We can describe text shadow by X and Y offsets, blur radius, and color.

There are four possible values for the text-shadow property:

• offset-x
• offset-y
• blur radius
• color

Syntax:

/* offset-x | offset-y | blur-radius | color */ text-shadow: 5px 5px 2px green; /* color | offset-x | offset-y | blur-radius */ text-shadow: #007a4d 2px 3px 8px; /* offset-x | offset-y | color */ text-shadow: 2px 2px darkblue; /* color | offset-x | offset-y */ text-shadow: #f00 4px 2px; /* offset-x | offset-y */ text-shadow: 4px 7px; /* Use defaults for color and blur-radius */ /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: revert; text-shadow: unset;

Example:

p {
   text-shadow: 2px 2px 5px green;  /* offset-x | offset-y | blur-radius | color */
   }

Output:

Box Shadow

The Box Shadow(box-shadow) property in CSS is used to apply shadow around the frame of the element.

We can set multiple effects for box-shadow property which are been separated by commas. We can describe box shadow by X and Y offsets, blur and spread radius, and color.

There are six possible values for the box-shadow property:

• inset keyword (it makes the direction of shadow inwards the frame) (optional)
• offset-x
• offset-y
• blur radius
• spread radius
• color

Syntax:

/* offset-x | offset-y | color */ box-shadow: 25px 6px cyan; /* offset-x | offset-y | blur-radius | color */ box-shadow: 30px 8px 16px green; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 5px 5px 4px 2px #fff; /* inset | offset-x | offset-y | color */ box-shadow: inset 3em 2em black; /* Any number of shadows, separated by commas */ box-shadow: 8px 6px yellow, -10px 2px 0.4em green; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: unset;

Example:

p {
   box-shadow: 4px 4px 5px 2px green;  /* offset-x | offset-y | blur-radius | spread-radius | color */
   }

Output:

That’s all about the Text Shadow and Box Shadow in CSS.

You may like: Pseudo selectors in CSS | Web Development.

Hope this article will guide you to recognize all about the Text Shadow and Box Shadow in CSS that you needed and still, if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.