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.


takes any color value, like hex, named, [rgba]( or [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:

Using pseudo elements, we could have 3D effects with box-shadow property. Check out this pen:

## 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]( or [HSLa]( values for the color,

You can check different examples of text-shadow in this pen that I have created learning from this article:

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.