CSS Shadow Effect
Basically we can add shadow effect in two ways -
- Text Shadow
- Box shadow
1. Text Shadow
To add shadows to text, use the text-shadow property. The syntax is as follows -
Syntax -
text-shadow: horizontal-offset vertical-offset blur color;
|
Shadow without blur radius -
Example -
Output -
This creates a blue shadow effect around a heading
Shadow with blur radius -
Example -
To add a blur effect, add an option blur radius argument -
Output –
Multiple Shadows -
Example -
To give an element multiple shadows, separate them with commas -
Output -