All CSS Shadow properties explained in one place

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.

The box-shadow

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.
© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.