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! 🍻

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];

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.

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.

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

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.

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).

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

Comments

[Andrei 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

[David Asaolu]

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

[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!

[David Asaolu]

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

[Vishal2369]

Great article

[David Asaolu]

Thank you very much Vishal

[Cess]

Great article chief

[David Asaolu]

Thank you Cess!

[Abayomi Ogunnusi]

Very informative

[David Asaolu]

Glad! You found it informative 💪

[Marcos F.]

Thank you! Great source of inspiration

[David Asaolu]

Glad, you found it useful Marcos

[Jeferson Silva]

great job. Thank you for share.

[David Asaolu]

You're welcome Jeferson