CSS3 have a few features that are important to learn and use. There are two important shadow related properties that we all know about. They are box-shadow and text-shadow. We demonstrate them with some examples.
This property is used to create shadows for block-level elements. The syntax for box-shadow property is like below:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; ``` **The horizontal offset** : If positive, the shadow will be on the right of the box and if negative the shadow will be on the left. **The vertical offset:** IF positive, the shadow will be below the box and if negative the shadow will be above the box. **The blur radius:** If set to 0, shadow will be sharp. If positive the more blur it would be and the shadow will extend further. **Color:** takes any color value, like hex, named, [rgba](https://css-tricks.com/rgba-browser-support/) or [hsla](https://css-tricks.com/yay-for-hsla/). ### **All above properties are required. ** **The spread radius: ** This is optional and by default it is zero. If positive, increases the shadow size and if negative, decreases the shadow size. You could see a few examples here in this pen. I have created one side shadow, inner shadow and multiple borders example here: https://codepen.io/azad6026/pen/pKqrjd Using pseudo elements, we could have 3D effects with box-shadow property. Check out this pen: https://codepen.io/haibnu/pen/FxGsI ## The text-shadow The text-shadow property applies shadows on the text itself. The syntax looks like this:text-shadow: [horizontal offset] [vertical offset] [blur radius] [color]; ``` The effect of the values are the same as box-shadow. based on that positive values make the shadow on the right and below the text. The blur is optional and it is zero by default.Also, remember you can use [RGBa](https://css-tricks.com/rgba-browser-support/) or [HSLa](https://css-tricks.com/examples/HSLaExplorer/) values for the color, You can check different examples of text-shadow in this pen that I have created learning from this article: https://codepen.io/azad6026/pen/MXZvrq Thank you for reading.