How to put a shadow on a button in HTML & CSS

25 Sep 2021

You can add a shadow on any side of a HTML button.

You can put it on top, left, bottom and right side of the button.

Also, you can put the shadow on two sides or all sides of the button.

Bottom Button Shadow

To add a simple bottom shadow on a button using the following css code:

box-shadow: 0px 10px red;

This adds a solid shadow to the bottom of the button.

To add the shadow to the right of the button, use a positive number value on the first value.

box-shadow: 10px 10px red;

Now you have a shadow on the right and at the bottom of the button.

You can add a left button shadow turn the first value from negative into positive px value.

box-shadow: -10px 0px red;

To add a top button shadow change the second value into a negative px value.

box-shadow: 0px -10px red;

To make the solid shadow appear like a real shadow, add the blur value.

box-shadow: 0px 10px 5px red;

Finally, you can control the size of the shadow using a fifth value called the spread radius.

box-shadow: 0px 10px 5px 20px red;