DEV Community

Cover image for Apply CSS Box Shadow the right way + FREE Resources
David Asaolu
David Asaolu

Posted on • Updated on

Apply CSS Box Shadow the right way + FREE Resources

Hello my wonderful friend, welcome to this tutorial!
Today, I'll be explaining CSS Box Shadow and I will also be sharing different cool resources that will help you add box shadow to elements on your website in no time!

Stick with me till the end! 🍻

CSS Box Shadow Tutorial

What exactly is Box Shadow?

Box-shadow is a CSS property that adds shadow effects around an element's frame, and you can set multiple effects separated by commas.

Here is the syntax:

box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Enter fullscreen mode Exit fullscreen mode

Box Shadow takes all other measurement types except for percentages %

What exactly do each of these box shadow effects mean?

1. Inset:

This is an optional keyword. The presence of the inset keyword changes the shadow direction to be inside the frame, instead of its default outward appearance.

CSS Box Shadow - Inset Box Shadow Example

2. Horizontal Offset:

This represents the shadow on the right of the element. When it is positive, it means the shadow will be on the right of the box, while a negative value will put the shadow on the left of the box. It is compulsory.

The image below shows the effect of the horizontal offset (30px) and the inset property.
Notice that the inset property changes the direction of the box-shadow just like the negative horizontal offset.

CSS Box Shadow - Horizontal Offset

3. Vertical Offset:

This represents the shadow at the bottom of the element. When it is positive, it means the shadow will be at the bottom, while a negative value will put the shadow on top of the box. It is also a compulsory value.

Here is an another example similar to Horizontal offset

CSS Box Shadow - Vertical Offset

4. Blur Radius:

This adds some opacity to the color of the shadow. The default value is zero. If set to 0 or not specified, the shadow will be sharp. The higher the number or value, the more blurred it will be. It is optional.

CSS Box Shadow - Blur Radius

5. Spread Radius:

This determines the size of the shadow. The larger the value, the larger the shadow. Also, where its length ends is where the blur begins. Positive values increase the size of the shadow, negative values decrease the size. Its default value is 0 (same size as blur radius).

CSS Box Shadow - Spread Radius

Let's check out some use cases of CSS Box Shadow

Interesting Box Shadow Examples on Codepen πŸš€

πŸ’― FREE Resources to get Up & Running with CSS Box Shadow πŸš€

  1. Neumorphism
  2. Box Shadow Art
  3. Box Shadow CSS Generator
  4. Box Shadow

Thank you for reading till the end.

Feel free to follow for more interesting and educative posts and also Connect with me on
πŸš€ Linkedin
πŸš€ Twitter

CSS Box Shadow Giphy

Discussion (14)

Collapse
awps profile image
Andrew Surdu

Excelent article.
I found some interesting designs.
Recently I realeased a box-shadow tool, which allows to save creations online, and I'll add some of them there.
BTW, you can chexk it out if interested. box-shadow.art

Collapse
arshadayvid profile image
David Asaolu Author

Wow! This is a very great tool Andrew.
Really worthy to be added to the list of resources.

Collapse
rriegel profile image
Ryan Riegel

Really helpful, just incorporated the transition property to a box-shadow attribute in one of my personal projects. So nice looking 😎
Thanks for putting this together and including CodePen examples!

Collapse
arshadayvid profile image
David Asaolu Author

Glad you found them useful Ryan. The pleasure is mine.

Collapse
vishal2369 profile image
Vishal2369

Great article

Collapse
arshadayvid profile image
David Asaolu Author

Thank you very much Vishal

Collapse
cesscode profile image
Cess

Great article chief

Collapse
arshadayvid profile image
David Asaolu Author

Thank you Cess!

Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi

Very informative

Collapse
arshadayvid profile image
David Asaolu Author

Glad! You found it informative πŸ’ͺ

Collapse
krehator21 profile image
Marcos F.

Thank you! Great source of inspiration

Collapse
arshadayvid profile image
David Asaolu Author

Glad, you found it useful Marcos

Collapse
jotajeff profile image
Jeferson Silva

great job. Thank you for share.

Collapse
arshadayvid profile image
David Asaolu Author

You're welcome Jeferson